GVKun编程网logo

jQuery中ajax - post() 方法实例详解

10

对于jQuery中ajax-post()方法实例详解感兴趣的读者,本文将提供您所需要的所有信息,并且为您提供关于ajax在js中和jQuery中的用法实例详解、jQueryAjax实例详解($.aja

对于jQuery中ajax - post() 方法实例详解感兴趣的读者,本文将提供您所需要的所有信息,并且为您提供关于ajax在js中和jQuery中的用法实例详解、jQuery Ajax 实例详解 ($.ajax、$.post、$.get)、jquery ajax定义与用法实例详解、jQuery中ajax - get() 方法实例详解的宝贵知识。

本文目录一览:

jQuery中ajax - post() 方法实例详解

jQuery中ajax - post() 方法实例详解

在jquery中的ajax有二个数据发送模式,一种是get,另一种是post()。

jQuery Ajax 参考手册

实例

请求 test.PHP 网页,忽略返回值:

$.post("test.PHP");

TIY 实例

通过 AJAX POST 请求改变 div 元素的文本:

$("input").keyup(function(){
 txt=$("input").val();
 $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){
 $("span").html(result);
 });
});

亲自试一试

定义和用法

post() 方法通过 HTTP POST 请求从服务器载入数据。

语法

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

详细说明

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

$.ajax({
 type: 'POST',url: url,data: data,success: success,dataType: dataType
});

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

对于 jQuery 1.5,也可以向 success 回调函数传递 jqXHR 对象(jQuery 1.4 中传递的是 XMLHttpRequest 对象)。

大部分实现会规定一个 success 函数:

$.post("ajax/test.html",function(data) {
 $(".result").html(data);
});

本例读取被请求的 HTML 片段,并插入页面中。

通过 POST 读取的页面不被缓存,因此 jQuery.ajaxSetup() 中的 cache 和 ifModified 选项不会影响这些请求。

注释:由于浏览器安全方面的限制,大多数 "Ajax" 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。

注释:如果由 jQuery.post() 发起的请求返回错误代码,那么不会有任何提示,除非脚本已调用了全局的 .ajaxError() 方法。或者对于 jQuery 1.5,jQuery.post() 返回的 jqXHR 对象的 .error() 方法也可以用于错误处理。

jqXHR 对象

对于 jQuery 1.5,所有 jQuery 的 AJAX 方法返回的是 XMLHTTPRequest 对象的超集。由 $.post() 返回的 jQuery XHR 对象或 "jqXHR,"实现了约定的接口,赋予其所有的属性、方法,以及约定的行为。出于对由 $.ajax() 使用的回调函数名称便利性和一致性的考虑,它提供了 .error(),.success() 以及 .complete() 方法。这些方法使用请求终止时调用的函数参数,该函数接受与对应命名的 $.ajax() 回调函数相同的参数。

jQuery 1.5 中的约定接口同样允许 jQuery 的 Ajax 方法,包括 $.post(),来链接同一请求的多个 .success()、.complete() 以及 .error() 回调函数,甚至会在请求也许已经完成后分配这些回调函数。

// 请求生成后立即分配处理程序,请记住该请求针对 jqxhr 对象
 var jqxhr = $.post("example.PHP",function() {
 alert("success");
 })
 .success(function() { alert("second success"); })
 .error(function() { alert("error"); })
 .complete(function() { alert("complete"); });
 // 在这里执行其他任务
 
 // 为上面的请求设置另一个完成函数
 jqxhr.complete(function(){ alert("second complete"); });

更多实例

例子 1

请求 test.PHP 页面,并一起发送一些额外的数据(同时仍然忽略返回值):

$.post("test.PHP",{ name: "John",time: "2pm" } );

例子 2

向服务器传递数据数组(同时仍然忽略返回值):

$.post("test.PHP",{ 'choices[]': ["Jon","Susan"] });

例子 3

使用 ajax 请求发送表单数据:

$.post("test.PHP",$("#testform").serialize());

例子 4

输出来自请求页面 test.PHP 的结果(HTML 或 XML,取决于所返回的内容):

$.post("test.PHP",function(data){
 alert("Data Loaded: " + data);
 });

例子 5

向页面 test.PHP 发送数据,并输出结果(HTML 或 XML,取决于所返回的内容):

$.post("test.PHP",time: "2pm" },function(data){
 alert("Data Loaded: " + data);
 });

例子 6

获得 test.PHP 页面的内容,并存储为 XMLHttpResponse 对象,并通过 process() 这个 JavaScript 函数进行处理:

$.post("test.PHP",function(data){
 process(data);
 },"xml");

例子 7

获得 test.PHP 页面返回的 json 格式的内容:

$.post("test.PHP",{ "func": "getNameAndTime" },function(data){
 alert(data.name); // John
 console.log(data.time); // 2pm
 },"json");

以上内容通过实例给大家介绍了jQuery中ajax - post() 方法示例详解,希望对大家今后的工作学习有所帮助,在下篇文章将给大家介绍jquery中ajax-get()方法示例详解,需要的朋友请持续关注本站。

ajax在js中和jQuery中的用法实例详解

ajax在js中和jQuery中的用法实例详解

原生 JS

怎么发送一个 get 请求

  • 创建一个 ajax 对象
    • var xhr = new XMLHttpRequest()
  • 设置请求方式和请求地址[,是否异步]
    • xhr.open(''get'', ''/ajax''[, true or fasle])
  • 准备接受请求体
    • xhr.onload = function () { console.log(xhr.responseText) }
    • xhr.onreadystatechange = function () { if (xhr.readyState === 4) { console.log( xhr.responseText ) } }
  • 发送请求
    • xhr.send(null)
var xhr = new XMLHttpRequest()
xhr.open(''get'', ''/ajax'')
xhr.onload = function () {
  console.log(xhr.responseText)
}
xhr.send(null)

怎么发送一个 post 请求

  • 创建一个 ajax 对象
    • var xhr = new XMLHttpRequest()
  • 设置请求方式和请求地址[,是否异步]
    • xhr.open(''post'', ''/ajax''[, true or fasle])
  • 准备接受请求体
    • xhr.onload = function () { console.log(xhr.responseText) }
    • xhr.onreadystatechange = function () { if (xhr.readyState === 4) { console.log( xhr.responseText ) } }
  • 发送请求
    • xhr.send(null)
var xhr = new XMLHttpRequest()
xhr.open(''post'', ''/ajax'')
xhr.onload = function () {
  console.log(xhr.responseText)
}
xhr.send(null)

发送一个带有参数的 get 请求

  • var xhr = new XMLHttpRequest
  • 直接在请求地址后面拼接参数,? 开始,key=value 的形式,多个参数之间以 &  分割
    • xhr.open(''get'', ''/ajax?name=Jack&age=18'')
  • xhr.onload = function () { console.log( xhr.responseText ) }
  • xhr.send()

发送一个带有参数的 post 请求

var xhr = new XMLHttpRequest

不需要在请求地址后面拼接任何内容

  • xhr.open(''post'', ''/ajax'')

xhr.onload = function () { console.log( xhr.responseText ) }

post 方式携带参数是直接写在 xhr.send() 后面的 () 里面

  • 自己收集数据 key=value
    • 自己设置请求头
    • xhr.setRequestHeadr(''content-type'', ''application/x-www-form-urlencoded'')
  • FormData 收集数据
    • 什么都不需要,只要使用 FormData 收集数据就可以了
    • var fd = new FormData(DOM)
    • 在发送请求的时候只要把 fd 带过去就行了
var xhr = new XMLHttpRequest()
xhr.open(''post'', ''/ajax'')
xhr.onload = function () {
  console.log(xhr.responseText)
}
xhr.setRequestHeadr(''content-type'', ''application/x-www-form-urlencoded'')
xhr.send(''key=value&key=value'')
var fd = new FormData(document.querySelector(''form''))
var xhr = new XMLHttpRequest()
xhr.open(''post'', ''/ajax'')
xhr.onload = function () {
  console.log(xhr.responseText)
}
xhr.send(fd)

jQuery

$.get 几个参数,怎么使用

地址

  • 参数 key=value 或者 { name: ''Jack'' }
  • 成功的回调函数
  • 预期后台返回的数据类型
    • text : 什么都不做,直接给你结果
    • json : 必定会执行一步 JSON.parse()

$.post 几个参数,怎么使用

  • 地址
  • 参数 key=value 或者 { name: ''Jack'' }, 不能发送 FormData
  • 成功的回调函数
  • 预期后台返回的数据类型

$.ajax 几个参数,怎么使用

  • 就是配置项 options
    • url: 请求地址
    • method/type:  请求方式
    • data: 携带参数
    • dataType: 后台返回的数据类型天
    • success: 成功的回掉
    • error: 失败的回调
    • contentType:  发送 FormData 的时候使用的
    • processData: 发送 FormData 的时候使用的

JSONP

$.ajax 怎么发送 jaonp 请求

  • dataType 必须是 jsonp
  • 方式必须是 get
  • jsonp: 根据后台来决定
$.ajax({
  url: ''/jsonp'',
  data: {},
  dataType: ''jsonp'',
  jsonp: ''callback'',
  success (res) {
    console.log(res)
  }
})

总结

到此这篇关于ajax在js中和jQuery中的用法的文章就介绍到这了,更多相关ajax在js中和jQuery的用法内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

您可能感兴趣的文章:
  • jquery.jsPlumb实现拓扑图
  • JavaScript/jQuery实现切换页面效果
  • JavaScript实现楼梯滚动特效(jQuery实现)
  • js实现七夕表白弹幕效果 jQuery实现弹幕技术
  • JavaScript与JQuery框架基础入门教程
  • JS实现jQuery的append功能
  • jQuery是用来干什么的 jquery其实就是一个js框架
  • JavaScript中通用的jquery动画滚屏实例

jQuery Ajax 实例详解 ($.ajax、$.post、$.get)

jQuery Ajax 实例详解 ($.ajax、$.post、$.get)

Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了。

推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看,

地址为:https://www.jb51.net/article/26903.htm

$.post、$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax()

一、$.ajax的一般格式

$.ajax({
  type: ''POST'',
  url: url ,
 data: data ,
 success: success ,
 dataType: dataType
});

二、$.ajax的参数描述

参数 描述

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

可选。规定预期的服务器响应的数据类型。

默认执行智能判断(xml、json、script 或 html)。

三、$.ajax需要注意的一些地方:

  1.data主要方式有三种,html拼接的,json数组,form表单经serialize()序列化的;通过dataType指定,不指定智能判断。

  2.$.ajax只提交form以文本方式,如果异步提交包含<file>上传是传过不过去,需要使用jquery.form.js的$.ajaxSubmit

四、$.ajax我的实际应用例子

//.$.ajax带json数据的异步请求
 var aj = $.ajax( { 
  url:''productManager_reverseUpdate'',// 跳转到 action 
  data:{ 
    selRollBack : selRollBack, 
    selOperatorsCode : selOperatorsCode, 
    PROVINCECODE : PROVINCECODE, 
    pass : pass 
  }, 
  type:''post'', 
  cache:false, 
  dataType:''json'', 
  success:function(data) { 
   if(data.msg =="true" ){ 
    // view("修改成功!"); 
    alert("修改成功!"); 
    window.location.reload(); 
   }else{ 
    view(data.msg); 
   } 
  }, 
  error : function() { 
   // view("异常!"); 
   alert("异常!"); 
  } 
 });
 //.$.ajax序列化表格内容为字符串的异步请求
 function noTips(){ 
  var formParam = $("#form").serialize();//序列化表格内容为字符串 
  $.ajax({ 
   type:''post'',  
   url:''Notice_noTipsNotice'', 
   data:formParam, 
   cache:false, 
   dataType:''json'', 
   success:function(data){ 
   } 
  }); 
 } 
 //.$.ajax拼接url的异步请求
 var yz=$.ajax({ 
  type:''post'', 
  url:''validatePwd_checkPwd?password=''+password, 
  data:{}, 
  cache:false, 
  dataType:''json'', 
  success:function(data){ 
   if( data.msg =="false" ) //服务器返回false,就将validatePassword的值改为pwdError,这是异步,需要考虑返回时间 
   { 
    textPassword.html("<font color=''red''>业务密码不正确!</font>"); 
    $("#validatePassword").val("pwdError"); 
    checkPassword = false; 
    return; 
   } 
  }, 
  error:function(){} 
 }); 
 //.$.ajax拼接data的异步请求
 $.ajax({ 
  url:''<%=request.getContextPath()%>/kc/kc_checkMerNameUnique.action'', 
  type:''post'', 
  data:''merName=''+values, 
  async : false, //默认为true 异步 
  error:function(){ 
  alert(''error''); 
  }, 
  success:function(data){ 
  $("#"+divs).html(data); 
  }
 });

 下面是ajax()提供了一大票参数,所以说可以实现非常复杂的功能。

参数名 类型 描述
url String (默认: 当前页地址) 发送请求的地址。
type String (默认: “GET”) 请求方式 (“POST” 或 “GET”), 默认为 “GET”。
注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
timeout Number 设置请求超时时间(毫秒)。此设置将覆盖全局设置。
async Boolean (默认: true) 默认设置下,所有请求均为异步请求。
如果需要发送同步请求,请将此选项设置为 false。
注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
beforeSend Function 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。

XMLHttpRequest 对象是唯一的参数。

[javascript] view plaincopy
  1. function (XMLHttpRequest) {  
  2. this// the options for this ajax request  
  3. }  


cache Boolean (默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。
complete Function 请求完成后回调函数 (请求成功或失败时均调用)。

参数: XMLHttpRequest 对象,成功信息字符串。

[javascript] view plaincopy
  1. function (XMLHttpRequest, textStatus) {  
  2. this// the options for this ajax request  
  3. }  


contentType String (默认: “application/x-www-form-urlencoded”) 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
data Object,
String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。
查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。
如果为数组,jQuery 将自动为不同值对应同一个名称。
如 {foo:["bar1", "bar2"]} 转换为 ‘&foo=bar1&foo=bar2′。
dataType String 预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息
返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:

“xml”: 返回 XML 文档,可用 jQuery 处理。

“html”: 返回纯文本 HTML 信息;包含 script 元素。

“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。

“json”: 返回 JSON 数据 。

“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时,

如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。

这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。

[javascript] view plaincopy
  1. function (XMLHttpRequest, textStatus, errorThrown) {  
  2. // 通常情况下textStatus和errorThown只有其中一个有值  
  3. this// the options for this ajax request  
  4. }  


global Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,

如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件

ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。

使用 HTTP 包 Last-Modified 头信息判断。

processData Boolean (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串)

以配合默认内容类型 “application/x-www-form-urlencoded”。

如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

success Function

请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态

[javascript] view plaincopy
  1. function (data, textStatus) {  
  2. // data could be xmlDoc, jsonObj, html, text, etc...  
  3. this;  
  4.  // the options for this ajax request  
  5. }  


以上所述就是本文给大家介绍的关于jQuery Ajax 实例详解 ($.ajax、$.post、$.get)的相关资料,希望对大家学习jquery ajax实例有所帮助。

您可能感兴趣的文章:
  • ajax请求get与post的区别总结
  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
  • Jquery AJAX POST与GET之间的区别
  • jquery中get,post和ajax方法的使用小结
  • ajax请求post和get的区别以及get post的选择
  • jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
  • jQuery中Ajax的get、post等方法详解
  • Jquery中ajax提交表单几种方法(get、post两种方法)
  • 如何解决Ajax访问不断变化的session的值不一致以及HTTP协议中的GET、POST的区别
  • 探讨.get .post .ajax ztree 还有后台servlet传递数据的相关知识
  • jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
  • 原生 JS Ajax,GET和POST 请求实例代码
  • 在Ajax中使用get和post所遇到的问题及解决办法

jquery ajax定义与用法实例详解

jquery ajax定义与用法实例详解

定义和用法

ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数,除非你需要操作不常用的选项,以获得更多的灵活性。

最简单的情况下,$.ajax() 可以不带任何参数直接使用。

注意:所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍。

我们先从最简单的方法看起,处理复杂的ajax请求时,jQuery使用jQuery.ajax()方法进行处理。在jQuery中有一些简单的方 法,它对jQuery.ajax()方法进行了封装,使得我们在处理一些简单的Ajax事件时,不需要使用jQuery.ajax()方法,其中有些方法 在之前的文章中已经出现过了,相信大家很快便能掌握。

执行一般Ajax请求的方法

1.load() 加载远程数据到选中的元素中

<script type="text/javascript">
$(document).ready(function(){
  $("#b01").click(function(){
  $(&#39;#myDiv&#39;).load(&#39;/jquery/test.txt&#39;);
  });
});
</script>
登录后复制

2.ajax() 将数据加载到XMLHttpRequest对象中

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
  /// <summary>
  /// param1 param2 对应前面js传递来的参数。
  /// </summary>
  /// <param name="param1"></param>
  /// <param name="param2"></param>
  /// <returns></returns>
  [System.Web.Services.WebMethod]
  public static string GetDataTable(String param1, String param2)
  {
    return DataTable2Json(CreateDataTable(param1, param2));
  }
  public static System.Data.DataTable CreateDataTable(String param1, String param2)
  {
    System.Data.DataTable dataTable1 = new System.Data.DataTable("BlogUser");
    System.Data.DataRow dr;
    dataTable1.Columns.Add(new System.Data.DataColumn("UserId", typeof(System.Int32)));
    dataTable1.Columns.Add(new System.Data.DataColumn("UserName", typeof(System.String)));
    dataTable1.PrimaryKey = new System.Data.DataColumn[] { dataTable1.Columns["UserId"] };
    for (int i = 0; i < 8; i++)
    {
      dr = dataTable1.NewRow();
      dr[0] = i;
      dr[1] = "【孟子E章】" + i.ToString() + " 前端传递的参数的值分别是:" + param1 + ", " + param2;
      dataTable1.Rows.Add(dr);
    }
    return dataTable1;
  }
  public static string DataTable2Json(System.Data.DataTable dt)
  {
    StringBuilder jsonBuilder = new StringBuilder();
    jsonBuilder.Append("{\"");
    jsonBuilder.Append(dt.TableName.ToString());
    jsonBuilder.Append("\":[");
    for (int i = 0; i < dt.Rows.Count; i++)
    {
      jsonBuilder.Append("{");
      for (int j = 0; j < dt.Columns.Count; j++)
      {
        jsonBuilder.Append("\"");
        jsonBuilder.Append(dt.Columns[j].ColumnName);
        jsonBuilder.Append("\":\"");
        jsonBuilder.Append(dt.Rows[i][j].ToString());
        jsonBuilder.Append("\",");
      }
      jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
      jsonBuilder.Append("},");
    }
    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
    jsonBuilder.Append("]");
    jsonBuilder.Append("}");
    return jsonBuilder.ToString();
  }  
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>jQuery Ajax 调用后台方法返回 DataSet 或者 DataTable 的例子</title>
  <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<body>
  <form id="form1" runat="server">
  <div id="result"></div>
  </form>
  <script type="text/javascript">
    $(document).ready(function () {
      $.ajax({
        type: "POST",
        url: "<%=Request.Url.ToString() %>/GetDataTable",  /* 注意后面的名字对应CS的方法名称 */
        data: "{\"param1\":\"8888\",\"param2\":\"参数2\"}", /* 注意参数的格式和名称 */
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
          data = jQuery.parseJSON(result.d);  /*这里是否解析要看后台返回的数据格式,如果不返回表名则无需要 parseJSON */
          t = "<table border=&#39;1&#39;>";
          $.each(data.BlogUser, function (i, item) { /* BlogUser是返回的表名 */
            t += "<tr>";
            t += "<td>" + item.UserId + "</td>";
            t += "<td>" + item.UserName + "</td>";
            t += "</tr>";
          })
          t += "</table>";
          $("#result").html(t);
        }
      });
    });      
  </script>
</body>
</html>
登录后复制

3.post() 通过post方式传参

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>.NET下jQuery-post方法应用</title>
    <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
</head>
<body>
    <div>
        加法:
        <input type="text" id="txt_1" name="txt_1" maxlength="5"/> + 
        <input type="text" id="txt_2" name="txt_2" maxlength="5"/> 
        <input type="button" id="btn_1" value="计算" /> 
        <span id="span_1">结果:</span>
        
        <br />
        
        乘法:
        <input type="text" id="txt_3" name="txt_3" maxlength="5"/> × 
        <input type="text" id="txt_4" name="txt_4" maxlength="5"/> 
        <input type="button" id="btn_2" value="计算" /> 
        <div id="div_2">结果:</div>
    </div>
    
    <script type="text/javascript">
        $("#btn_1").click(function(){
            //验证
            if ($("#txt_1").val()==&#39;&#39; || $("#txt_2").val()==&#39;&#39;)
            {
                alert(&#39;请输入要计算的值&#39;);
                return false;
            }
            //向add.ashx请求结果
            $.post(&#39;Enumerate/add.ashx&#39;,{ 
                //参数一
                num1: $(&#39;#txt_1&#39;).val(), 
                //参数二
                num2: $("#txt_2").val() 
            }, 
            //回调函数
            function(theback) 
            {
                //输出结果
                $("#span_1").text(theback);
            },
            //返回类型
            "text"
            );
        });
        
        $("#btn_2").click(function(){
            //验证
            if ($("#txt_3").val()==&#39;&#39; || $("#txt_4").val()==&#39;&#39;)
            {
                alert(&#39;请输入要计算的值&#39;);
                return false;
            }
            //向multiply.ashx请求结果
            $.post(&#39;Enumerate/multiply.ashx&#39;,{ 
                //参数一
                num1: $(&#39;#txt_3&#39;).val(), 
                //参数二
                num2: $("#txt_4").val() 
            },
            //回调函数 
            function(theback) 
            {
                //输出结果
                $("#div_2").html(&#39;第一个数:&#39;+theback.num1+&#39;<br />&#39;+&#39;第二个数:&#39;+theback.num2+&#39;<br />&#39;+&#39;算法类型:&#39;+theback.type+&#39;<br />&#39;+&#39;计算结果:&#39;+theback.result);
            },
            //返回类型
            "json"
            );
        });
    </script>
</body>
</html>
登录后复制

4.get() 通过get方式传递参数,使用同post()方法

5.getScript() 通过Get方式请求并执行一个javascript文件,url为javascript文件地址

以上就是jquery ajax定义与用法实例详解的详细内容,更多请关注php中文网其它相关文章!

jQuery中ajax - get() 方法实例详解

jQuery中ajax - get() 方法实例详解

在jquery中使用get,post和ajax方法给服务器端传递数据,在上篇文章给大家分享了jquery中ajax-post()方法实例,下面通过本文继续学习jQuery中ajax - get() 方法,具体介绍请看下文。

jQuery Ajax 参考手册

实例

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

$("button").click(function(){
 $.get("demo_ajax_load.txt", function(result){
 $("div").html(result);
 });
});

亲自试一试

定义和用法

get() 方法通过远程 HTTP GET 请求载入信息。

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

语法

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

 

详细说明

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

$.ajax({
 url: url,
 data: data,
 success: success,
 dataType: dataType
});

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

对于 jQuery 1.4,也可以向 success 回调函数传递 XMLHttpRequest 对象。

示例

请求 test.php 网页,忽略返回值:

$.get("test.php");

更多示例

例子 1

请求 test.php 网页,传送2个参数,忽略返回值:

$.get("test.php", { name: "John", time: "2pm" } );

例子 2

显示 test.php 返回值(HTML 或 XML,取决于返回值):

$.get("test.php", function(data){
 alert("Data Loaded: " + data);
});

例子 3

显示 test.cgi 返回值(HTML 或 XML,取决于返回值),添加一组请求参数:

$.get("test.cgi", { name: "John", time: "2pm" },
 function(data){
 alert("Data Loaded: " + data);
 });

jquery ajax 的 $.get()用法详解

js文件

$(document).ready(function(){
 $("form").submit(function(event) {event.preventDefault()})//取消submit的默认行为
 $("form input[type=''submit'']").click(function(){
 var url = $(''form'').attr(''action''); // 取Form中要提交的链接
 var param = {}; // 组装发送参数
 param[''name''] = $(''form input[name=name]'').val();
 param[''age''] = $(''form input[name=age]'').val();
 $.get(url, param, function(dom) { $(''div.get'').append(dom) }) ; // 发送并显示返回内容
 });
})

html文件

<form action="ajax.php" method="get">
Name: <input type="text" name="name" />
Age: <input type="text" name="age" />
<input type="submit" />
</form>
<div>这是ajax的get方法</div>

php文件

error_reporting(0);
 if($_GET["name"]=="kitty")
{
 $name= "you are the lucky";
}
else
$name=$_GET["name"];
$age=$_GET["age"];
echo "<div> ".$name." ".$age."</div>";

以上介绍就是本文给大家分享的jQuery中ajax - get() 方法实例详解,希望大家喜欢。

您可能感兴趣的文章:
  • jQuery中ajax的load()与post()方法实例详解
  • jquery中get,post和ajax方法的使用小结
  • jquery 读取页面load get post ajax 四种方式代码写法
  • jQuery中Ajax的get、post等方法详解
  • Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
  • jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
  • jQuery中ajax的get()方法用法实例
  • jQuery中ajax的load()方法用法实例
  • 详谈jQuery Ajax(load,post,get,ajax)的用法

关于jQuery中ajax - post() 方法实例详解的问题就给大家分享到这里,感谢你花时间阅读本站内容,更多关于ajax在js中和jQuery中的用法实例详解、jQuery Ajax 实例详解 ($.ajax、$.post、$.get)、jquery ajax定义与用法实例详解、jQuery中ajax - get() 方法实例详解等相关知识的信息别忘了在本站进行查找喔。

本文标签: