Ajax的post方式提交数据

2018-06-23 23:02:40来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

最新需要学习如何使用 POST 提交方法的接口,正好看到了Ajax 版本的感觉不错分享给大家,欢迎高手指点。

<SCRIPT LANGUAGE=”javascript”>

<!–      

function saveUserInfo()
{
    //获取接受返回信息层
    var msg = document.getElementById(”msg”); 

    //获取表单对象和用户信息值
    var f = document.user_info;     
    var userName = f.user_name.value;
    var userAge = f.user_age.value;
    var userSex = f.user_sex.value;

    //接收表单的URL地址
    var url = “commit.php”;     
    //需要POST的值,把每个变量都通过&来联接 
    var postStr = “name=”+ userName +”&age=”+ userAge +”&sex=”+ userSex;

    //实例化Ajax
    var ajax = null;
    if(window.XMLHttpRequest){
        ajax = new XMLHttpRequest();
       }
    else if(window.ActiveXObject){
        ajax = new ActiveXObject(”Microsoft.XMLHTTP”);
       }
    else{
        return;
       }

    //通过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){
               msg.innerHTML = ajax.responseText;
            }
      }
}

 –>
</SCRIPT>

<form name=”user_info”>
     姓名:<input type=”text” name=”user_name” /><br/>
     年龄:<input type=”text” name=”user_age” /><br/>
     性别:<input type=”text” name=”user_sex” /><br/>
<input type=”button” value=”提交表单” onClick=”saveUserInfo()”>
</form>

//构建一个接受返回信息的层:
<div id=”msg”></div>

:
与get方法比较,post方法可传输大于2K的数据,在Ajax里的应用不同之处在于:”post方法的请求地址与传输的数据是放在两个对象里—-请求地址放在open对象里,传输的数据放在send对象里;并且在传输数据之前定义一个传输文件HTTP头信息(setRequestHeader)”
在commit.php文件里可以用变量$_POST[’name’] ,  $_POST[’age’],    $_POST[’sex’]获得send对象传输的数据.并对数据库进行操作.

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:快捷设置IE代理小工具

下一篇:亿级Web系统搭建——单机到分布式集群[转]