【Ajax技术】JQuery的应用与高级调试技巧

最新推荐文章于 2022-03-26 18:00:59 发布

weixin_33920401

最新推荐文章于 2022-03-26 18:00:59 发布

阅读量153

点赞数

文章标签： javascript 面试 java ViewUI

原文链接：https://yq.aliyun.com/articles/18646

版权

在写Ajax之前，我们先了解一下Jquery，首先我们先准备一下Jquery的API文档以备不时之需。

我们来继续写verify()方法：

<pre name="code" class="javascript">//定义用户名校验的方法
function verify(){
	
	//1.获取文本框当中的内容
	//document.getElementById("username");  dom的方式
	//jquery的查找节点的方式,参数中#加上id属性值可以找到一个节点
	//jquery的方法返回的都是jquery的对象，可以继续在上面执行其他的jquery方法
	var jqueryObj=$("#username");
	var userName=jqueryObj.val();
	//alert("文本框的值是:"+userName);
	
	
	//2.将文本中的数据发送给服务器的servlet
	//用javascript的话，写向服务器发数据的代码很长很痛苦，使用jquery一句话就够了
	//详情查看Jquery的API帮助文档的Ajax部分
	//使用jauery的XMLHTTPrequest对象get请求的封装
	//get请求第一个参数是后台服务类的名称，参数二是post方式加的参数(这里用get，写成null)
	//第三个参数是回调函数(做异步)
	$.get("AjaxServer?name="+userName,null,callback);
}

//回调函数
function callback(data){
	
	//3.接受服务器端返回的数据
	//alert(data);
	
	//4.将服务器返回的数据动态的显示在页面上
	//找到保存信息的节点
	var resultObj=$("#result");
	//往这个节点填充服务器返回的值
	//div节点中的内容就会被改变
	resultObj.html(data);
}

当然可以将代码写的更简洁一点:

function verify(){
    $.get("AjaxServer?name="+$("#username").val(),null,function(data)(
	$("#result").html(data);
     ));
}

回顾一下html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>用户校验ajax实例</title>
    <script type="text/javascript" src="js/verify.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.0.js"></script>
  </head>
  
  <body>
    <h1> 用户校验ajax实例</h1><br>
    请输入用户名:<br/>
    <!-- ajax不需要使用表单进行数据提交，因此不用写表单标签 -->
    
    <!-- ajax不需要name属性，只需要一个id的属性 -->
    <input type="text" id="username"/>
    <input type="button" value="校验" οnclick="verify()"/>
    <!-- 这个div用于存放服务器返回的信息，开始为空 -->
    <!-- id属性定义是为了利用dom的方式找到某一个节点，进行操作 -->
    <div id="result">
    
    </div>
    <!-- div和span的值的差异，div的内容独占行，span的内容和其他内容相处良好 -->
    
  </body>
</html>

我们就完成了一个最简单的校验：
测试：
在输入框写123，在输入框下出现：
用户名[123]尚未存在，可以使用该用户名注册, 1
测试成功！

看样子jquery很简单，但是我们也要知道它封装XMLHTTPrequest的原理，下一篇讲说明jquery是如何封装利用XMLHTTPrequest与服务器连接的。

面试经常问的:javaScript的XMLHTTPrequest对象是如何做到和服务器交互的？大家想想看

转载请注明出处：http://blog.csdn.net/acmman/article/details/47168097

weixin_33920401

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Ajax技术】JQuery的应用与高级调试技巧

在写Ajax之前，我们先了解一下Jquery，首先我们先准备一下Jquery的API文档以备不时之需。我们来继续写verify()方法：<pre name="code" class="javascript">//定义用户名校验的方法function verify(){ //1.获取文本框当中的内容 //document.getE...
复制链接

扫一扫