热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

jquery_jQuery中$.get()$.post()和$.ajax()

篇首语:本文由编程笔记#小编为大家整理,主要介绍了jQuery中$.get()$.post()和$.ajax()相关的知识,希望对你有一定的参考价值。jQuery.get

篇首语:本文由编程笔记#小编为大家整理,主要介绍了jQuery中$.get()$.post()和$.ajax()相关的知识,希望对你有一定的参考价值。


jQuery.get()方法:

$.get(url,data,success(response,status,xhr),dataType)

该函数是简写的 Ajax 函数,等价于:




[Javascript] view plain copy
 




  1. $.ajax({  

  2.   url: url,  

  3.   data: data,  

  4.   success: success,  

  5.   dataType: dataType  

  6. });  

根据响应的不同的 MIME 类型,传递给 success 回调函数的返回数据也有所不同,这些数据可以是 XML root 元素、文本字符串、Javascript 文件或者 JSON 对象。也可向 success 回调函数传递响应的文本状态。

 

























参数描述
url必需。规定将请求发送的哪个 URL。
data可选。规定连同请求发送到服务器的数据。
success(response,status,xhr)可选。规定当请求成功时运行的函数。
额外的参数:
response - 包含来自请求的结果数据
status - 包含请求的状态
xhr - 包含 XMLHttpRequest 对象
dataType可选。规定预计的服务器响应的数据类型。
默认地,jQuery 将智能判断。
可能的类型:
"xml"
"html"
"text"
"script"
"json"
"jsonp"

使用 AJAX 的 GET 请求来改变 div 元素的文本:




[Javascript] view plain copy
 




  1. $("button").click(function(){  

  2.   $.get("demo_ajax_load.txt", function(result){  

  3.     $("div").html(result);  

  4.   });  

  5. });  

jQuery.post()方法:

$.post(url,data,success(data, textStatus, jqXHR),dataType)

该函数是简写的 Ajax 函数,等价于:




[Javascript] view plain copy
 




  1. $.ajax({  

  2.   type: ‘POST‘,  

  3.   url: url,  

  4.   data: data,  

  5.   success: success,  

  6.   dataType: dataType  

  7. });  

根据响应的不同的 MIME 类型,传递给 success 回调函数的返回数据也有所不同,这些数据可以是 XML 根元素、文本字符串、Javascript 文件或者 JSON 对象。也可向 success 回调函数传递响应的文本状态。

 

























参数描述
url必需。规定把请求发送到哪个 URL。
data可选。映射或字符串值。规定连同请求发送到服务器的数据。
success(data, textStatus, jqXHR)可选。请求成功时执行的回调函数。
dataType

可选。规定预期的服务器响应的数据类型。
默认执行智能判断(xml、json、script 或 html)。


使用 AJAX 的 GET 请求来改变 div 元素的文本:




[Javascript] view plain copy
 




  1. $("input").keyup(function(){  

  2.   txt=$("input").val();  

  3.   $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){  

  4.     $("span").html(result);  

  5.   });  

  6. });  

实例:
一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数,请使用 $.ajax。
示例代码:

Ajax.aspx:




[Javascript] view plain copy
 




  1. Response.ContentType = "application/json";Response.Write("{result: ‘" + Request["Name"] + ",你好!(这消息来自服务器)‘}");  

jQuery 代码:




[Javascript] view plain copy
 




  1. $.post("Ajax.aspx", { Action: "post", Name: "lulu" },       

  2.    function (data, textStatus){          

  3.     // data 可以是 xmlDoc, jsonObj, html, text, 等等.    

  4.     //this;  

  5.     // 这个Ajax请求的选项配置信息,请参考jQuery.get()说到的this    

  6.    alert(data.result);          

  7. }, "json");  

 


点击提交:
这里设置了请求的格式为"json":
$.ajax()这个是jQuery 的底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
这里有几个Ajax事件参数:beforeSend ,success ,complete ,error 。我们可以定义这些事件来很好的处理我们的每一次的Ajax请求。

 




[Javascript] view plain copy
 




  1. $.ajax({  

  2. url: ‘stat.php‘,  

  3. type: ‘POST‘,  

  4. data:{Name:"keyun"},  

  5. dataType: ‘html‘,  

  6. timeout: 1000,  

  7. error: function(){alert(‘Error loading PHP document‘);},  

  8. success: function(result){alert(result);}  

  9. });  

$.get()与$.post()的区别:

《计算机网络》对POST和GET方法在HTTP协议中的简单解释:HTTP协议定义了通信的两种报文:请求报文和响应报文。对于请求报文来说,它的通用格式包含三个主要部分:请求行、首部行、实体主体。通常请求行的格式为:方法字段、URL字段、HTTP协议版本字段,其中方法字段就包括GET、POST方法等。
当方法字段是GET方法时内容主体为空,而是用POST方法时才使用实体主体。
HTTP客户机通常在用户提交表单时使用POST方法,这时,实体主体中所包含的就是用户在表单中的输入值。当然,GET方法也可以提交表单中的数据,它是通过将用户在表单中的输入值传送到正确的URL来实现的。这就是我们通常所看到的http://ei.hust.edu.cn?username="libis"&age=12。
可以看出,在表单提交的方式上两者存在很大的不同:
1.Post方法将表单数据填充到HTTP请求报文中的实体主体部分,使用者是看不到的。而GET方法则是将表单数据直接传送到请求行的URL字段来实现表单数据提交的。这也就决定了使用POST是相对比较安全的,而是用GET方法的安全性就很低。
除此之外,GET方法和POST方法另一个重要的区别是:
2.GET方法传送的数据量较小,一般只有2k。而POST方法传送的数据量较大,理论上没有上限。

$.ajax()需要注意的一些地方:

1.data主要方式有三种,html拼接的,json数组,form表单经serialize()序列化的;通过dataType指定,不指定智能判断。
2.$.ajax只提交form以文本方式,如果异步提交包含上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit

$.ajax() 实际应用例子




[Javascript] view plain copy
 




    1. //1.$.ajax带json数据的异步请求  

    2. var aj = $.ajax( {    

    3.     url:‘productManager_reverseUpdate‘,// 跳转到 action    

    4.     data:{    

    5.              selRollBack : selRollBack,    

    6.              selOperatorsCode : selOperatorsCode,    

    7.              PROVINCECODE : PROVINCECODE,    

    8.              pass2 : pass2    

    9.     },    

    10.     type:‘post‘,    

    11.     cache:false,    

    12.     dataType:‘json‘,    

    13.     success:function(data) {    

    14.         if(data.msg =="true" ){    

    15.             // view("修改成功!");    

    16.             alert("修改成功!");    

    17.             window.location.reload();    

    18.         }else{    

    19.             view(data.msg);    

    20.         }    

    21.      },    

    22.      error : function() {    

    23.           // view("异常!");    

    24.           alert("异常!");    

    25.      }    

    26. });  

    27.   

    28.   

    29. //2.$.ajax序列化表格内容为字符串的异步请求  

    30. function noTips(){    

    31.     var formParam = $("#form1").serialize();//序列化表格内容为字符串    

    32.     $.ajax({    

    33.         type:‘post‘,        

    34.         url:‘Notice_noTipsNotice‘,    

    35.         data:formParam,    

    36.         cache:false,    

    37.         dataType:‘json‘,    

    38.         success:function(data){    

    39.         }    

    40.     });    

    41. }    

    42.   

    43.   

    44. //3.$.ajax拼接url的异步请求  

    45. var yz=$.ajax({    

    46.      type:‘post‘,    

    47.      url:‘validatePwd2_checkPwd2?password2=‘+password2,    

    48.      data:{},    

    49.      cache:false,    

    50.      dataType:‘json‘,    

    51.      success:function(data){    

    52.           if( data.msg =="false" ) //服务器返回false,就将validatePassword2的值改为pwd2Error,这是异步,需要考虑返回时间    

    53.           {    

    54.                textPassword2.html("业务密码不正确!");    

    55.                $("#validatePassword2").val("pwd2Error");    

    56.                checkPassword2 = false;    

    57.                return;    

    58.            }    

    59.       },    

    60.       error:function(){}    

    61. });   

    62.   

    63.   

    64. //4.$.ajax拼接data的异步请求  

    65. $.ajax({     

    66.     url:‘<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action‘,     

    67.     type:‘post‘,     

    68.     data:‘merName=‘+values,     

    69.     async : false, //默认为true 异步     

    70.     error:function(){     

    71.        alert(‘error‘);     

    72.     },     

    73.     success:function(data){     

    74.        $("#"+divs).html(data);     

    75.     }  

    76. });  


推荐阅读
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 在springmvc框架中,前台ajax调用方法,对图片批量下载,如何弹出提示保存位置选框?Controller方法 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
  • 本文介绍了使用AJAX的POST请求实现数据修改功能的方法。通过ajax-post技术,可以实现在输入某个id后,通过ajax技术调用post.jsp修改具有该id记录的姓名的值。文章还提到了AJAX的概念和作用,以及使用async参数和open()方法的注意事项。同时强调了不推荐使用async=false的情况,并解释了JavaScript等待服务器响应的机制。 ... [详细]
  • 开发笔记:加密&json&StringIO模块&BytesIO模块
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
  • Spring常用注解(绝对经典),全靠这份Java知识点PDF大全
    本文介绍了Spring常用注解和注入bean的注解,包括@Bean、@Autowired、@Inject等,同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用,以及@Autowired和@Inject的区别和用法。此外,还提到了@Required属性的配置和使用。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • 本文介绍了django中视图函数的使用方法,包括如何接收Web请求并返回Web响应,以及如何处理GET请求和POST请求。同时还介绍了urls.py和views.py文件的配置方式。 ... [详细]
  • 本文介绍了如何使用jQuery和AJAX来实现动态更新两个div的方法。通过调用PHP文件并返回JSON字符串,可以将不同的文本分别插入到两个div中,从而实现页面的动态更新。 ... [详细]
  • 从零基础到精通的前台学习路线
    随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
  • JavaWeb中读取文件资源的路径问题及解决方法
    在JavaWeb开发中,读取文件资源的路径是一个常见的问题。本文介绍了使用绝对路径和相对路径两种方法来解决这个问题,并给出了相应的代码示例。同时,还讨论了使用绝对路径的优缺点,以及如何正确使用相对路径来读取文件。通过本文的学习,读者可以掌握在JavaWeb中正确找到和读取文件资源的方法。 ... [详细]
  • Servlet多用户登录时HttpSession会话信息覆盖问题的解决方案
    本文讨论了在Servlet多用户登录时可能出现的HttpSession会话信息覆盖问题,并提供了解决方案。通过分析JSESSIONID的作用机制和编码方式,我们可以得出每个HttpSession对象都是通过客户端发送的唯一JSESSIONID来识别的,因此无需担心会话信息被覆盖的问题。需要注意的是,本文讨论的是多个客户端级别上的多用户登录,而非同一个浏览器级别上的多用户登录。 ... [详细]
  • XMLhttpREquest_Ajax技术总结之XmlHttpRequest
    Ajax1、 什么是ajax   ... [详细]
author-avatar
jixiaojia
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有