JQuery系列教材（九）- 对AJAX的支持 $.ajax $.get $.post load serialize

工具版本兼容问题

JQuery也有对 AJAX的支持，使得其对AJAX的操作简化了很多。

纠

关键字	简介	示例代码
$.ajax()	提交AJAX请求	示例代码
$.get()	使用get方式提交ajax	示例代码
$.post	使用post方式提交ajax	示例代码
load()	最简单的调用ajax的方式	示例代码
serialize()	格式化form下的输入数据	示例代码

示例 1 : 提交AJAX请求
示例 2 : 使用get方式提交ajax
示例 3 : 使用post方式提交ajax
示例 4 : 最简单的调用ajax的方式
示例 5 : 格式化form下的输入数据

示例 1 :

提交AJAX请求

edit 顶折

纠问

参考使用AJAX 通过无刷新验证账号是否存在这个例子,服务端使用 JSP进行验证，当用户输入 abc的时候提示"已经存在"
完整的 $.ajax 参数比较复杂，这里采用了常见的调用方式。

$.ajax({
url: page,
data:{"name":value},
success: function(result){
$("#checkResult").html(result);
}
});

$.ajax采用参数集的方式 {param1,param2,param3} 不同的参数之间用,隔开
第一个参数 url:page 表示访问的是page页面
第二个参数 data:{name:value} 表示提交的参数
第三个参数 success: function(){} 表示服务器成功返回后对应的响应函数

运行效果

代码行数较多，请点击查看

<script src="/study/jquery.min.js"></script>

<div id="checkResult"></div>
 
输入账号 :<input id="name" type="text"> 
 
<script>
$(function(){
   $("#name").keyup(function(){
     var page = "/study/checkName.jsp";
     var value = $(this).val();
        $.ajax({
            url: page,
            data:{"name":value},
            success: function(result){
              $("#checkResult").html(result);
            }
        });
   });
});

</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 2 :

使用get方式提交ajax

edit 顶折

纠问

$.get 是 $.ajax的简化版，专门用于发送 GET请求

$.get(
page,
{"name":value},
function(result){
$("#checkResult").html(result);
}
);

$.get 使用3个参数
第一个参数: page 访问的页面
第二个参数: {name:value} 提交的数据
第三个参数: function(){} 响应函数
只有第一个参数是必须的，其他参数都是可选

运行效果

代码行数较多，请点击查看

<script src="/study/jquery.min.js"></script>

<div id="checkResult"></div>
 
输入账号 :<input id="name" type="text"> 
 
<script>
$(function(){
   $("#name").keyup(function(){
     var page = "/study/checkName.jsp";
     var value = $(this).val();

        $.get(
            page,
            {"name":value},
            function(result){
              $("#checkResult").html(result);
            }
        );
   });
});

</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 3 :

使用post方式提交ajax

edit 顶折

纠问

$.post 是 $.ajax的简化版，专门用于发送 POST请求

$.post(
page,
{"name":value},
function(result){
$("#checkResult").html(result);
}
);

$.post 使用3个参数
第一个参数: page 访问的页面
第二个参数: {name:value} 提交的数据
第三个参数: function(){} 响应函数
只有第一个参数是必须的，其他参数都是可选
参考 method="get" 与 method="post"的区别

运行效果

代码行数较多，请点击查看

<script src="/study/jquery.min.js"></script>
 
<div id="checkResult"></div>
  
输入账号 :<input id="name" type="text"> 
  
<script>
$(function(){
   $("#name").keyup(function(){
     var page = "/study/checkName.jsp";
     var value = $(this).val();
 
        $.post(
            page,
            {"name":value},
            function(result){
              $("#checkResult").html(result);
            }
        );
   });
});
 
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 4 :

最简单的调用ajax的方式

edit 顶折

纠问

load比起 $.get, $.post 就更简单了
$("#id").load(page,[data]);
id: 用于显示AJAX服务端文本的元素Id
page: 服务端页面
data: 提交的数据，可选。在本例中，直接在page里加上了参数列表

运行效果

<script src="/study/jquery.min.js"></script>
  
<div id="checkResult"></div>
   
输入账号 :<input id="name" type="text"> 
   
<script>
$(function(){
   $("#name").keyup(function(){
     var value = $(this).val();
     var page = "/study/checkName.jsp?name="+value;
     $("#checkResult").load(page);
   });
});
  
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

示例 5 :

格式化form下的输入数据

edit 顶折

纠问

serialize()：格式化form下的输入数据
有的时候form下的输入内容比较多，一个一个的取比较麻烦，就可以使用serialize() 把输入数据格式化成字符串

运行效果

代码行数较多，请点击查看

<script src="/study/jquery.min.js"></script>
   
<div id="checkResult"></div>
<div id="data"></div>
<a href="/study/checkName.jsp">/study/checkName.jsp</a>

<form id="form">    
输入账号 :<input id="name" type="text" name="name"> <br>
输入年龄 :<input id="age" type="text" name="age"> <br>
输入手机号码 :<input id="mobile" type="text" name="mobile"> <br>
    
</form>

<script>
$(function(){
   $("input").keyup(function(){
      var data = $("#form").serialize();
      var url = "/study/checkName.jsp";
      var link = url+"?"+ data;
      $("a").html(link);
      $("a").attr("href",link);
   });
});
   
</script>

源代码

1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑，再次点击恢复

渲染中渲染完成

效果

JQuery系列教材（八）- 事件

JQuery系列教材（十）- 数组操作

程序编程之旅公众号，关注后实时获知最新的教程和优惠活动，谢谢。

问答区域

2020-01-17 最后一个示例为什么没有load都可以成功？

pjj	关于前端部分-JQuery-AJAX 的提问最后一个示例为什么没有load都可以成功？

1 个答案

19951018
答案时间：2020-03-12

因为最后一个实例并没有用ajax。就是单纯的把超链接修改了，只是为了讲解serialize()的用法，和ajax没有关系

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-12-10 关于serialize方法的JQuery版本支持问题

sparksun007

关于前端部分-JQuery-AJAX 的提问

应该是JQuery的版本问题，2.0.0使用总是返回""，但是用了1.10.2版本就没问题。

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2019-02-22 chrome上第一例用jquery提交ajax不显示

小白的java之路

关于前端部分-JQuery-AJAX 的提问

自己对比了一下，代码完全一样，并且还把站长的复制粘贴了一下，在页面上还是不显示。

3 个答案

冷冷冷
答案时间：2020-05-26

亲测，网址前缀是https，亏我在那里想来想去是哪里不对。。。如果http也可以那就是我的问题。。

太蔡了自闭中
答案时间：2020-04-12

嗯楼上说的对站长的JSP是挂在网站上的你没办法相对路径访问只能绝对路径

a312522505
答案时间：2019-03-01

jsp 地址换成 http://go.javamana.com/study/checkName.jsp

代码超过 5行，点击查看

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-12-31 账号是中文的情况怎么办,

名字不能重复多写几个字就不会重复了

关于前端部分-JQuery-AJAX -格式化form下的输入数据的提问

像这样编了码jsp就不能识别了,怎么办

jsp:
        String username = request.getParameter("userName");
	String password = request.getParameter("passWord");
									
	if("38524".equals(password) && "小凯38524".equals(username)){
		out.print("<font color = 'green'>登录成功</font>");
	}else{
		out.print("<font color = 'red'>登录失败</font>");
	}

1 个答案

jimmynqy
答案时间：2019-01-03

var data = $("#form").serialize(); data = decodeURIComponent(data,true); //解码

回答已经提交成功，正在审核。请于我的回答处查看回答记录，谢谢

2018-12-02 为什么最后一个实例中，它会自动区分用的是哪一个input标签啊

提问太多，页面渲染太慢，为了加快渲染速度，本页最多只显示几条提问。还有 5 条以前的提问，请点击查看

提问之前请登陆

提问已经提交成功，正在审核。请于我的提问处查看提问记录，谢谢

关于前端部分-JQuery-AJAX 的提问

尽量提供截图、代码和异常信息，有助于分析和解决问题。也可进本站QQ群交流: 496725845

提问尽量提供完整的代码，环境描述，越是有利于问题的重现，您的问题越能更快得到解答。
对教程中代码有疑问，请提供是哪个步骤，哪一行有疑问，这样便于快速定位问题，提高问题得到解答的速度
在已经存在的几千个提问里，有相当大的比例，是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本，可以节约自己大量的学习时间。站长把教学中用的软件版本整理了，都统一放在了这里，方便大家下载： /k/helloworld/helloworld-version/1718.html

上传截图