jquery ajax入门实例详解($.ajax $.get $.post $.getJSON $.getScript)

什么是 AJAX？

AJAX = Asynchronous JavaScript and XML.

AJAX 是一种创建快速动态网页的技术。
AJAX 通过在后台与服务器交换少量数据的方式，允许网页进行异步更新。这意味着有可能在不重载整个页面的情况下，对网页的一部分进行更新。

AJAX 和 jQuery
jQuery 提供了用于 AJAX 开发的丰富函数（方法）库。
通过 jQuery AJAX，使用 HTTP Get 和 HTTP Post，您都可以从远程服务器请求 TXT、HTML、XML 或 JSON。
而且您可以直接把远程数据载入网页的被选 HTML 元素中！
写的更少，做的更多
jQuery 的 load 函数是一种简单的（但很强大的）AJAX 函数。它的语法如下：

    $(selector).load(url,data,callback)

请使用 selector 来定义要改变的 HTML 元素，使用 url 参数来指定数据的 web 地址。
亲自试一试
只有当您希望向服务器发送数据时，才需要使用 data 参数。只有当您需要在执行完毕之后触发一个函数时，您才需要使用 callback 参数。
Low Level AJAX
$.ajax(options) 是低层级 AJAX 函数的语法。
$.ajax 提供了比高层级函数更多的功能，但是同时也更难使用。
option 参数设置的是 name|value 对，定义 url 数据、密码、数据类型、过滤器、字符集、超时以及错误函数。
jQuery AJAX 请求

请求 描述

    $(selector).load(url,data,callback) 把远程数据加载到被选的元素中
    $.ajax(options) 把远程数据加载到 XMLHttpRequest 对象中
    $.get(url,data,callback,type) 使用 HTTP GET 来加载远程数据
    $.post(url,data,callback,type) 使用 HTTP POST 来加载远程数据
    $.getJSON(url,data,callback) 使用 HTTP GET 来加载远程 JSON 数据
    $.getScript(url,callback) 加载并执行远程的 JavaScript 文件
    (url) 被加载的数据的 URL（地址）
    (data) 发送到服务器的数据的键/值对象
    (callback) 当数据被加载时，所执行的函数
    (type) 被返回的数据的类型 (html,xml,json,jasonp,script,text)
    (options) 完整 AJAX 请求的所有键/值对选项

讲了这么多我再来看看实例

$.ajax实例

 代码如下 复制代码

//1.$.ajax带json数据的异步请求
var aj = $.ajax( { 
    url:'productManager_reverseUpdate',// 跳转到 action 
    data:{ 
             selRollBack : selRollBack, 
             selOperatorsCode : selOperatorsCode, 
             PROVINCECODE : PROVINCECODE, 
             pass2 : pass2 
    }, 
    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("异常！"); 
     } 
});

//2.$.ajax序列化表格内容为字符串的异步请求
function noTips(){ 
    var formParam = $("#form1").serialize();//序列化表格内容为字符串 
    $.ajax({ 
        type:'post',     
        url:'Notice_noTipsNotice', 
        data:formParam, 
        cache:false, 
        dataType:'json', 
        success:function(data){ 
        } 
    }); 
} 

//3.$.ajax拼接url的异步请求
var yz=$.ajax({ 
     type:'post', 
     url:'validatePwd2_checkPwd2?password2='+password2, 
     data:{}, 
     cache:false, 
     dataType:'json', 
     success:function(data){ 
          if( data.msg =="false" ) //服务器返回false，就将validatePassword2的值改为pwd2Error，这是异步，需要考虑返回时间 
          { 
               textPassword2.html("<font color='red'>业务密码不正确！</font>"); 
               $("#validatePassword2").val("pwd2Error"); 
               checkPassword2 = false; 
               return; 
           } 
      }, 
      error:function(){} 
});

//4.$.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);  
    }
});

 

jquery.get实例

jquery.get( url, [ data ], [ callback(data, textstatus, xmlhttprequest) ], [ datatype ] )

returns: xmlhttprequest

url 字符串，其中包含的url的请求被发送。

data 地图或字符串发送到与请求的服务器。

callback(data, textstatus, xmlhttprequest)，如果请求成功执行。

datatypethe 类型的数据预计从服务器。

这是一个缩写的ajax功能，这相当于：

 代码如下 复制代码

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

 

调函数成功返回的数据传递，这将是一个xml根元素，文本字符串，网页特效文件，或根据响应的mime类型的json对象。它也通过了响应文本状态。

在jquery 1.4，成功回调函数也是通过xmlhttprequest对象。

大多数实现将指定一个成功的处理程序：

 代码如下 复制代码

$.get('ajax/test.html', function(data) {
  $('.result').html(data);
  alert('load was performed.');
});

jQuery.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,等等)
1.html页面（index.html）

 代码如下 复制代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<script type="text/javascript" src='#'" /jquery-1.3.2.js"></script>
<script language="javascript">
function checkemail(){
 
  if($('#email').val() == ""){
    $('#msg').html("please enter the email!");
    $('#email').focus;
    return false;
  }
  if($('#address').val() == ""){
    $('#msg').html("please enter the address!");
    $('#address').focus;
    return false;
  }
  ajax_post();
}

function ajax_post(){
  $.post("action.php",{email:$('#email').val(),address:$('#address').val()},
  function(data){
    //$('#msg').html("please enter the email!");
    //alert(data);
    $('#msg').html(data);
  },
  "text");//这里返回的类型有：json,html,xml,text
}
</script>
</head>

<body>
<form id="ajaxform" name="ajaxform" method="post" action="action.php">
    <p>
    email<input type="text" name="email" id="email"/>
   
    </p>
    <p>
    address<input type="text" name="address" id="address"/>
    </p>
    <p id="msg"></p>
    <p>   
        <input name="Submit" type="button" value="submit" onclick="return checkemail()"/>
    </p>
</form>
</body>
</html>

2.php页面(action.php)

 代码如下 复制代码

<?php
$email = $_POST["email"];
$address = $_POST["address"];

//echo $email;
//echo $address;
echo "success";
?>

jquery.getjson实例

jquery.getjson( url, [ data ], [ callback(data, textstatus) ] )
url 一个字符串，其中包含的url，该请求被发送。

data 地图或字符串，发送到与请求的服务器

callback(data, textstatus) 回调函数是执行，如果请求成功。

看一个简单的实例

 代码如下 复制代码

$.ajax({
  url: url,
  datatype: 'json',
  data: data,
  success: callback
});

回调是通过返回的数据，这将是一个网页特效对象或数组的定义和解析json结构使用$。parsejson（）方法。

大多数实现将指定一个成功的处理程序：

 代码如下 复制代码

$.getjson('ajax/test.json', function(data) {
  $('.result').html('<p>' + data.foo + '</p>'
    + '<p>' + data.baz[1] + '</p>');
});

这个例子，当然，依赖于json文件结构：

{
  "foo": "the quick brown fox jumps教程 over the lazy dog.",
  "bar": "abcdefg",
  "baz": [52, 97]
}

 代码如下 复制代码

<!doctype html>
<html>
<head>
  <style>img{ height: 100px; float: left; }</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <div id="images">

</div>
<script>$.getjson("/?tags=cat&tagmode=any&format=json&jsoncallback=?",
        function(data){
          $.each(data.items, function(i,item){
            $("<img/>").attr("src", item.media.m).appendto("#images");
            if ( i == 3 ) return false;
          });
        });</script>

</body>
</html>>

jquery $.getScript实例

 该函数是简写的 Ajax 函数，等价于：

 代码如下 复制代码
$.ajax({
  url: url,
  dataType: "script",
  success: success
});

这里的回调函数会传入返回的 JavaScript 文件。这通常不怎么有用，因为那时脚本已经运行了。

载入的脚本在全局环境中执行，因此能够引用其他变量，并使用 jQuery 函数。

比如加载一个 test.js 文件，里边包含下面这段代码：

 代码如下 复制代码
$(".result").html("<p>Lorem ipsum dolor sit amet.</p>");

通过引用该文件名，就可以载入并运行这段脚本：

 代码如下 复制代码

$.getScript("ajax/test.js", function() {
  alert("Load was performed.");
});
时间： 2024-09-03 02:58:17

jquery ajax入门实例详解($.ajax $.get $.post $.getJSON $.getScript)的相关文章

jQuery ajax 异步传输实例详解

在jquery中我们要使用异步或同步传输,只要在ajax参数的async设置真或假的设置即可 例, 不使用异步传输  代码如下 复制代码 function changeCartState(arr){    var str=false;    $.ajax({        type : 'POST',        async : false,        url : '/scripts/cart.php',        data: {act:'buy',itemId:arr},      

【jQuery教程】jquery新手入门实例教程三ajax应用

我们在上一章 jquery新手入门实例教学二 用户注册(简单的表单验证) (/html/JQueryjiaocheng/200807/17-519.html) 里面有一行语句 $.get("php/user_register.php",{act:$(this).attr("ID"),v:$(this).val()},function(txt){                    msg.html(txt); }) 这个就是jquery ajax应用的简单实例 什

Ajax教程实例详解

什么是 AJAX AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下(AJAX 是一种用于创建快速动态网页的技术). 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如

javascript中ajax post实例详解

一,原生态的XMLHttpRequest  代码如下 复制代码 <script language="javascript">          function saveintroduce()     {     //获取接受返回信息层     var introducemsg = document.getElementById("introducemsg");     //获取表单对象和用户信息值     var f = document.introd

关于二次封装jquery ajax办法示例详解

前言 Ajax 的全称是Asynchronous JavaScript and XML 异步的javaScript和XML AJax所涉及到得技术: 1.使用CSS和XHTML来表示. 2. 使用DOM模型来交互和动态显示. 3.使用XMLHttpRequest来和服务器进行异步通信.(核心) 4.使用javascript来绑定和调用. 在我们前端处理数据的时候免不了要 ajax 与后台通信, ajax 是通过 XMLHttpRequest 对象与服务器进行通信的, jquery 在 XMLHt

ajax数据传输方式实例详解

本文实例讲述了ajax数据传输方式.分享给大家供大家参考,具体如下: 在异步应用程序中发送和接收信息时,常见的可以选择以纯文本和XML作为数据格式(可参考<jQuery学习笔记之Ajax用法实例详解>),现在还有一种比较流行的方式:JSON(JavaScript Object Notation).好了,下面举例说明这三种数据格式在ajax的异步应用. 一.纯文本方式 1.发送/接收数据: Code is cheap.看代码: testJs.js // 此函数等价于document.getEle

Ajax教程实例详解_AJAX相关

什么是 AJAX AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下(AJAX 是一种用于创建快速动态网页的技术). 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如

jquery ajax 应用实例代码

jquery ajax 应用实例代码 /*  ajax 向页面发送数据                 $.post('save.cgi', {     text: 'my string',     number: 23 }, function() {     alert('your data has been saved.'); });   如果您确实需要编写一些复杂的 ajax 脚本,那么需要用到 $.ajax() 函数.您可以指定 xml.script.html 或者 json,jquer

jquery ajax 应用实例

jquery ajax 应用实例<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equi