JQuery的应用与高级调试技巧

ajax
ajax.html
<head>
 <title>xiexian.com用户名校验ajax实例</title>
 <script type="text/javascript" src="jslib/jquery.js"></script>
 <script type="text/javascript" src="jslib/verify.js"></script>
</head> 
<boby>
 xiexian.zhu用户名校验的ajax实例,请输入用户名:<br/>
 <!-- ajax方式不需要使用表单来进行数据提交,因此不需要写表单标签 -->
 <!--  ajax方式不需要name属性,但是需要一个id属性 -->
 <input type ="text" id="userName"/>
 <input type ="button" id="校验" οnclick="verify()"/>
 <!--这个div用于存放服务器段返回的信息,开始为空  -->
 <!--id属性定义是为拉利用dom的方式找到某一个节点,进行操作  -->
 
 <!--  <div id="result"></div>    -->
 
 <!--  <div id="result">123</div><div>456</div>    -->
 <!--  <span>123</span><span>456</span>    -->
 <!-- div和span的直观差异,div中内容独占行,span中的内容和前后其他内容相处良好。 -->
</boby>

verify.js
//定义用户名校验的方法
function verify(){
 //首先测试一下页面的按钮按下,可以调用这个方法
 //使用javascript的alert方法,显示一个弹出一个提示框
 //alert("按钮被点击了!!!");
 
 //1,获取文本框中的内容
 //document.getElementById("userName");dom的方式
 //jquery的查找节点的方式,参数中#加上id属性值可以找到一个节点。
 //jquery方法返回的都是jquery的对象,可以继续在上面执行其他的jquery方法。
 var jqueryObj = $("#userName");
 //获取节点的值
 var userName = jqueryObj.val();
 //alert(userName);
 
 //2,将文本框中的数据发给服务器段的servelt
 //使用jquery的XMLHTTPrequest对象get请求的封装
 $.get("AJAXServer?name=" + userName,null,callback); 
 
}
//回调函数
function callback(data){
 //alert("服务器段的数据回来拉!!!");
 //3,接收服务器端返回的数据
 alert(data);
 //4,将服务器段返回的数据动态的显示在页面上
 //找到保存结果信息的节点
 var resultObj = $("#result");
 //动态的改变页面中div节点中的内容
 resultObj.html(data);
 alert("");
}

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值