Ajax的post方式提交数据

王朝学院·作者佚名  2016-08-27
窄屏简体版  字體: |||超大  

最新需要学习如何使用 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 = newxmlhttpRequest();

}

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对象传输的数据.并对数据库进行操作.

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航