javascript中ajax post实例详解

最新推荐文章于 2023-07-17 11:54:28 发布

转载最新推荐文章于 2023-07-17 11:54:28 发布 · 63 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/alibai/p/3521939.html

文章标签：

#javascript #json #php #ViewUI

本文介绍了使用原生XMLHttpRequest实现Ajax的方式及通过jQuery $.post()和$.ajax()简化Ajax调用的方法。包括不同浏览器下XMLHttpRequest对象的创建、POST请求的发送以及服务器响应的处理。

一，原生态的XMLHttpRequest

代码如下复制代码
<script language="javascript">

    function saveintroduce()
    {
    //获取接受返回信息层
    var introducemsg = document.getElementById("introducemsg");
    //获取表单对象和用户信息值
    var f = document.introduceedt;
    var elm1 = encodeURIComponent(f.elm1.value);
    //接收表单的URL地址
    var url = "save.php?id=<?=$_GET["id"]?>";
    //需要POST的值，www.111cn.net 把每个变量都通过&来联接
    var postStr = 'elm1='+ elm1;
    //实例化Ajax
    //var ajax = InitAjax();
    var ajax = false;
    //开始初始化XMLHttpRequest对象
    if(window.XMLHttpRequest)
    { //Mozilla 浏览器
    ajax = new XMLHttpRequest();
    if (ajax.overrideMimeType)
    { //设置MiME类别
    ajax.overrideMimeType("text/xml");
    }
    }
    else if (window.ActiveXObject)
    { // IE浏览器
    try
    {
    ajax = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e)
    {
    try
    {
    ajax = new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e) {}
    }
    }
    if (!ajax)
    { // 异常，创建对象实例失败
    window.alert("不能创建XMLHttpRequest对象实例.");
    return false;
    }

    //通过Post方式打开连接
    ajax.open("POST", url, true);
    //定义传输的文件HTTP头信息
    ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //发送POST数据
    ajax.send(postStr);
    //获取执行状态
    ajax.onreadystatechange = function()
    {
    //如果执行状态成功，那么就把返回信息写到指定的层里
    if (ajax.readyState == 4 && ajax.status == 200)
    {
    introducemsg.innerHTML = ajax.responseText;
    }
    }
    }
    </script>

    <form id="introduceedt" name="introduceedt" action="save.php>" method="post">
    <input name="elm1" id="elm1" ><input type="button" value="提交表单" onClick="saveintroduce()"><div id="introducemsg"></div></div></td>

    </form>

二，jquery ajax.post

1.jQuery $.post() 方法

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

实例

代码如下复制代码
$("button").click(function(){
$.post("demo_test_post.asp",
{
    name:"Donald Duck",
    city:"Duckburg"
},
function(data,status){
    alert("Data: " + data + " Status: " + status);
});
});

2、$.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）。

更多详细内容请查看：http://www.111cn.net/wy/jquery/57064.htm