Jquery中$.ajax $.post load用法与区别

最新推荐文章于 2021-08-06 09:04:42 发布
最新推荐文章于 2021-08-06 09:04:42 发布
阅读量612 收藏
点赞数
分类专栏： jquery 和 jquery Ajax
原文链接：https://blog.csdn.net/yz1988computer/article/details/41380583
版权

在jquery中我们要实现无刷新页面可以使用有$.ajax $.post $('#xxx').load(url,para)三个函数来实现

$.ajax用法


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     function getVerify(){
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
     
     
     if($(
     
     '#regRuser').val()){
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     var m=$(
     
     '#regRuser').val();
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
      
     
     if(
     
     /^13d{9}$/g.test(m)||(
     
     /^15[0-35-9]d{8}$/g.test(m))|| (
     
     /^18d{9}$/g.test(m))){
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
       
     
     var postData = $(
     
     '#reg_form').serialize();
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
        $.ajax({
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     type: 
     
     "POST",
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     url: 
     
     "/ajax/getVerify",
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     data: postData,
    
    
    
   
   
  10. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     success: 
     
     function(msg){
    
    
    
   
   
  11. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
         
     
     if(msg>
     
     0){
    
    
    
   
   
  12. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           alert(
     
     '验证码已发送至您手机，请注意查收');
    
    
    
   
   
  13. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           $(
     
     '#getVerify').hide();
    
    
    
   
   
  14. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           $(
     
     '.regnav').css(
     
     'background',
     
     'url(/static/images/v10/regnav2.png)');
    
    
    
   
   
  15. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           $(
     
     '#checkvalidate').show();
    
    
    
   
   
  16. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           f_timeout();
    
    
    
   
   
  17. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           $(
     
     '.abc').show();
    
    
    
   
   
  18. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
          }
     
     else 
     
     if(msg==
     
     0){
    
    
    
   
   
  19. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
           alert(
     
     '手机号已被注册');
    
    
    
   
   
  20. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
          }
    
    
    
   
   
  21. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
         }
    
    
    
   
   
  22. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
        });
    
    
    
   
   
  23. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       }
     
     else{
    
    
    
   
   
  24. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
        alert(
     
     '请输入正确的手机号');
    
    
    
   
   
  25. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
       }
    
    
    
   
   
  26. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
      }
    
    
    
   
   
  27. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     }

 心细的朋友会发现中间有一个postData数据，而是由$('#reg_form').serialize();生成了，那么$('#reg_form').serialize();会是什么数据来，我们来简单举个实例

$.Form.serialize( NameValuePair )

虚拟一个表单，并设置表单控件名与值。

参数
NameValuePair
必选项。设置虚拟的表单控件。该参数形式为：{ name1=value, name2=value2, ......}
返回值
虚拟表单序列化后的字符串，其格式如：username=%E5%95%8A%E8%94%A1&password=123456

描述
表单中如有 disabled=true 或者没有 name 属性的控件将被忽略。同名控件将发送一组同名但不同值的字符串。该方法通常用于 Ajax 的提交参数(parameters)。

示例如下：


  
  
  1. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      <form method="post" name="reg" action="http://localhost">
     
     
    
    
    
  2. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
      
      
      <input type="text" name="username" />
     
     
    
    
    
  3. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
      
      
      <input type="password" name="password" />
     
     
    
    
    
  4. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
      
      
      <input type="checkbox" name="interest" value="music" /> //新用户兴趣爱好调查，勾选
     
     
    
    
    
  5. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
      
      
      <input type="checkbox" name="interest" value="sport" /> //勾选
     
     
    
    
    
  6. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
      
      
      <input type="checkbox" name="interest" value="dance" /> //勾选 
     
     
    
    
    
  7. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
      
      
      <input type="submit" value="用户注册" />
     
     
    
    
    
  8. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
      
      
      <input type="button" value="用JavaScript提交表单" οnclick="test()" />
     
     
    
    
    
  9. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      </form>
     
     
    
    
    
  10. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      <script type="text/javascript" >
      
      
     
     
    
    
    
  11. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      function test(){ 
     
     
    
    
    
  12. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
           alert( $.Form(
      
      "reg").serialize( { 
      
      regTime:
      
      new 
      
      Date().toGMTString()} ) );  
      
      //serizlize 方法补充了一个时间控件，控件的name=regTime，值为当前时间。
     
     
    
    
    
  13. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
     
     
     
    
    
    
  14. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      //username=%E5%95%8A%E8%94%A1&password=123456&interest=music&interest=sport&interest=dance&regtime=Thu%2C%2027%20Sep%202007%2008%3A35%3A55%20UTC。 
     
     
    
    
    
  15. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      //注意里面的同名表单
     
     
    
    
    
  16. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      }
     
     
    
    
    
  17. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      </script>

从上面可以看得出来这个是ajax get格式了，数据量不能太大了。

 

$.post

jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求


参数：

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

.post("Ajax.aspx", { Action: "post", Name: "lulu" },        function (data, textStatus){            // data 可以是 xmlDoc, jsonObj, html, text, 等等.      //this;    // 这个Ajax请求的选项配置信息，请参考jQuery.get()说到的this     alert(data.result);        }, "json");点击提交：


  
  
  1. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      function  sendMsg()
     
     
    
    
    
  2. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      {
     
     
    
    
    
  3. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
     
      
      var isphone=  checkPhone($(
      
      "#username").val());
     
     
    
    
    
  4. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
     
      
      if(!isphone )
     
     
    
    
    
  5. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
       {
     
     
    
    
    
  6. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
        $(
      
      "#btn").val(
      
      "发送中...");
     
     
    
    
    
  7. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
        $.post(
      
      "momsg.php",{
      
      "tel":$(
      
      "#username").val()},
      
      function(data){
     
     
    
    
    
  8. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      //alert(data);
     
     
    
    
    
  9. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
      
      if(data==
      
      0)
      
      //0  成功  1  不成功  2 手机号码格式不对
     
     
    
    
    
  10. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
          {     
     
     
    
    
    
  11. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
         
      
      //    
     
     
    
    
    
  12. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
          }    
     
     
    
    
    
  13. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
        
     
     
    
    
    
  14. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
        });
     
     
    
    
    
  15. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
       }
     
     
    
    
    
  16. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
     
      
      else
     
     
    
    
    
  17. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
       {
     
     
    
    
    
  18. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
        alert(
      
      '请输入正确的手机号码!');$(
      
      "#username").focus();
     
     
    
    
    
  19. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
       }
     
     
    
    
    
  20. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
     
     
     
    
    
    
  21. 
    
    
    
     
     
    
    
    
    
    
    
    
     
     
    
      
      }


这个最核心的一句是$.post("momsg.php",{"tel":$("#username").val()}了

 

$('#xxx').load(url,para)

调用load方法的完整格式是：load( url, [data], [callback] ),

•url：是指要导入文件的地址。
•data：可选参数；因为Load不仅仅可以导入静态的html文件，还可以导入动态脚本，例如PHP文件，所以要导入的是动态文件时，我们可以把要传递的参数放在这里。
•callback：可选参数；是指调用load方法并得到服务器响应后，再执行的另外一个函数。

$("#content").load("你自己的网站下的xx.aspx");

 

在你的xx.aspx里使用WebRequest访问"http://www.baidu.com，将结果返回给js

一：如何使用data

1.加载一个php文件，该php文件不含传递参数

$("#myID").load("test.php");

//在id为#myID的元素里导入test.php运行后的结果

2. 加载一个php文件，该php文件含有一个传递参数

$("#myID").load("test.php",{"name" : "Adam"});

//导入的php文件含有一个传递参数，类似于：test.php?name=Adam
3. 加载一个php文件，该php文件含有多个传递参数。注：参数间用逗号分隔

$("#myID").load("test.php",{"name" : "Adam" ，"site":"61dh.com"});

//导入的php文件含有一个传递参数，类似于：test.php?name=Adam&site=61dh.com

4. 加载一个php文件，该php文件以数组作为传递参数

$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]});

//导入的php文件含有一个数组传递参数。
注意：使用load，这些参数是以POST的方式传递的，因此在test.php里，不能用GET来获取参数





 

 

 


 


 

 

$.ajax()方法：https://www.w3school.com.cn/jquery/ajax_ajax.asp

$(选择器).load()方法：https://www.w3school.com.cn/jquery/jquery_ajax_load.asp

get()/post()方法：https://www.w3school.com.cn/jquery/jquery_ajax_get_post.asp

如果你觉得本人的文章对你有所帮助，客官慢走请赏瓶水喝
微信 支付宝
留下的弥足珍贵
关注
专栏目录
jquery使用ajax发送payload
zhongqiu1693的博客
09-24 1036
jquery使用ajax发送payload var data = {'name':'李丹','work':'工程师'}; $.ajax({ url: '', type: 'POST',//我们使用的swaggerAPI，方法不对，会返回403错误 contentType: 'application/json; charset=utf-8', // 类型必须设置 data: JSON.stringify(data), //必须使用JSON.stringify({'name':'
jQuery中Ajax函数：$.ajax()、$.post()、$.get()的使用、区别；
小枯林的博客
06-09 4252
本篇博客目的是：在OA系统十九：请假功能五遇到了【layui.$.post()：layui内置的jQuery的Ajax函数：向后台发起post请求；】；对此不太明白，故而本篇博客专门介绍jQuery中Ajax发起请求的内容。 首先，关于jQuery和Ajax可以参考：JQuery对Ajax的支持：简介$.ajax(jsonExpression)；JQuery对Ajax简化和封装简单示例；以及附近相关文章。 目录 0.预先介绍：jQuery AJAX 方法 1.$.ajax() 方法...
jquery $.ajax() $.get() $.load() 区别
byjy123456的专栏
08-13 795
其实简单来说get（）和post（）就是ajax（）的get方法和post方法，load（）也一样但是load()可以加载到一个选定的元素中
jquery Ajax的load、post、get、put、delete的用法
deze0926的博客
09-19 243
1、load() 　　load()方法是jquery中最简单和常用的Ajax方法，能载入远程html代码并插入到DOM中，结构为load( url [, data] [, callback]); 参数名称　　 类型　　 说明 　　 url String　　 请求HTML页面的url地址 data(可选) ...
jquery ajax asp,JQuery的ajax的用法在asp中使用$.ajax()实现
weixin_35475608的博客
08-06 195
复制代码 代码如下:response.Expires=-1response.CacheControl="no-cache"%>cmd = checkstr(request("cmd"),2)if cmd="loadteacher" thenresponse.Charset = "gb2312"set rs=server.CreateObject("adodb.recordset")sql="...
Jquery中的ajax $.load,.$get,$.post
向日葵没有阴天
10-11 420
Jquery对ajax操作进行了封装，在Jquery中，$.ajax()方法属于最底层的方法，第二层方法是\$.load(),\$.get(),\$.post(),第三层方法是\$.getScript()和\$.getJSON,今天我们来详细分解一下第二层的方法，因为它们的使用频率很高。 一、load()方法   1.load()方法主要是用来远程载入HTML代码，并能够将代码插入到DOM中。
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
10-26
在jQuery中，有四种主要的Ajax方法用于与服务器进行异步数据交互，它们分别是$.get(), $.post(), $.ajax()和$.getJSON()。这些方法简化了JavaScript中的Ajax操作，使得开发者能够更加便捷地处理数据交互。 1. **$....
详细解读Jquery各Ajax函数($.get(),$.post(),$.ajax(),$.getJSON())
10-21
接下来，我们将详细介绍jQuery中各种AJAX函数，包括$.get()、$.post()、$.ajax()和$.getJSON()。 首先，$.get()方法是一种简单实现GET请求的方式。它的语法是$.get(url, [data], [callback])。其中url参数代表请求...
jQuery Ajax之$.get()方法和$.post()方法
12-07
在jQuery库中，$.get()和$.post()是两种非常常用的Ajax请求方法，它们用于向服务器发送异步请求，获取或提交数据，而无需刷新整个页面。这些方法都是全局函数，与jQuery对象的方法如.load()有所不同，后者是对特定...
jquery $.ajax入门应用二
10-30
`jQuery $.ajax` 是一个非常强大的 AJAX 函数，它简化了原生 JavaScript 中使用 XMLHttpRequest 对象进行异步请求的过程。通过这个函数，开发人员可以轻松地发送 HTTP 请求，并处理服务器返回的数据，而无需刷新整个...
SpringBoot注解最全详解
qq_28190397的博客
05-28 584
一、注解列表如下（配备了完善的释义）------(可采用ctrl+F 来进行搜索哦~~~~) @SpringBootApplication：包含了@ComponentScan、@Configuration和@EnableAutoConfiguration注解。其中 @ComponentScan：让spring Boot扫描到Configuration类并把它加入到程序上下文。 @Configuration ：等同于spring的XML配置文件；使用Java代码可以检查类型安全。 @EnableAutoCon
$.post(),$.ajax(),$.get()和load()
书山有路，学海无涯
02-21 6779
Query对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法， 第2层是load(),$.get()和$.post()方法 第三层是$.getScript()和$.getJSON() 方法。首先介绍第二层的方法 载入html文档 load（）方法是jquery中最为简单和常用的Ajax方法 能载入远程的HTML代码并 插入DOM中 结构为： load(url
jpa注解的一些用法
ytp151730的专栏
08-07 6671
一、方法的标注： @PrePersist @PostPersist @PreRemove @PostRemove @PreUpdate @PostUpdate @PostLoad 。它们标注在某个方法之前，没有任何参数。这些标注下的方法在实体的状态改变前后时进 行调用，相当于拦截器，参考图 13.6 实体状态转换关系图，pre 表示在状态切换前触发， post 则表示在切换后触发。 @Post
JPA @PostPersist 等注解的使用场景和使用方法
qq_35325112的博客
01-15 7229
JPA @PostPersist 等注解的使用场景和使用方法 在我们使用JPA对数据库进行操作的时候，我们时常会出现数据库字段设置未不能为空，而我们保存的字段为null导致程序报错。这个时候我们就可以使用 @PrePersist @PostPersist 注解回调方法来解决问题。 回调方法是附加到实体生命周期事件的用户定义方法，并且在发生这些事件时由JPA自动调用。 我们可以发现有很多类似的...
jquery $.ajax $.get $.post的区别？
weixin_30752377的博客
03-27 186
$.ajax 是 jQuery 底层 AJAX 实现，$.ajax是一种通用的底层封装，$.ajax()请求数据之后，则需要使用回调函数，有beforeSend、error、dataFilter、success、complete等。$.get $.post是简单易用的高层实现，我们使用$.get $.post方法，jQuery会自动封装调用底层的$.ajax。$.get 只处理简单的 GET 请求...
jquery $.ajax $.get $.post的区别
qq_24511311的博客
11-22 417
$.ajax 是 jQuery 底层 AJAX 实现，$.ajax是一种通用的底层封装，$.ajax()请求数据之后，则需要使用回调函数，有beforeSend、error、dataFilter、success、complete等。$.get $.post是简单易用的高层实现，我们使用$.get $.post方法，jQuery会自动封装调用底层的$.ajax。$.get 只处理简单的 GET 请求
关于JQuery($.load)事件的用法和分析
10-27
这篇文章主要探讨了$.load()的使用方法和一些相关的技巧。 首先，理解$.load()的基本用法至关重要。其基本语法结构如下： ```javascript $("#element").load(url, data, callback); ``` - `url`：指定要从服务器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值