您的位置：首页 > Web前端 > JQuery

Struts2 使用jQuery实现Ajax

2016-10-14 14:35 453 查看
在jQuery中将Ajax相关的操作进行封装，使用时只需在合适的地方调用Ajax相关的方法即可，相比而言，使用jQuery实现Ajax更加简洁，方便





1.$.Ajax()可以通过发送Http请求加载远程数据，是jQuery最底层的Ajax实现，具有较高的灵活性











如果使用jQuery提供的$.Ajax()方法实现发送Ajax异步请求，只需设置几个参数即可。success函数用来处理响应；另外不需要的参数可以不写

$.Ajax()方法类表需要包含在“{”和“}”之间；多个参数之间以“，”隔开；每个参数以“参数名:参数值”的方式书写

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>

<script type="text/javascript" src="js/jQuery1.11.1.js"></script>

<script type="text/javascript">

//给文本框注册一个失去焦点事件
$(function(){
//等待页面上所有标签完毕后执行
var dom=$("#txtName");
dom.blur(function(){
myjquery();
});
});

function  myjquery(){
var dom=$("#txtName");
$.ajax({
url:'<%=path%>/servlet/CheckUserServlet',
type:'post',
data:{uname:dom.val()},
success:function(today){
//today server  打到 浏览器的数据
alert(today);
}
});
}
</script>

</head>

<body>
<h1>我是Jquery发送Ajax</h1>
<input type="text" name="txtName" id="txtName"/> <span id="msg"></span><br/>
<input type="password" name="txtPwd"/>
</body>
</html>


效果：





内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航