Ajax提交帖子请求的案例研究

本文讲述了一个Ajax提交帖子请求的例子。分享给大家参考，如下：

前言：博主有一篇关于Ajax入门的文章，主要是用Ajax做简单的get请求。今天想和大家分享一篇关于使用Ajax提交帖子请求的文章，以及使用帖子时需要注意的点，或者以案例的方式告诉大家。

案例：

登记表

文件结构图：

06-ajax-reg.html文件：

页面中主要有一个表单，使用onsubmit事件。在onsubmit事件中，首先获取准备post的内容，然后创建XMLHttpRequest对象，再确定请求参数，然后重写回调函数。在函数中，主要是根据请求状态使用服务器端返回值，然后发送请求，最后返回false，这样表单就无法提交，页面也不会跳转。

！doctype html head metharset=' utf-8 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title link rel='样式表' href=' '/head script//create XMLHttpRequest对象functioncreatexhr(){ var xhr=null；if(窗口。XMLHttpRequest){ xhr=new XMLHttpRequest()；//Google、Firefox等浏览器} else if(window . ActiveX object){ xhr=new ActiveX object(' Microsoft . xmlhttp ')；//ie低版本}返回xhr}//注册方法函数reg(){ //1，获取Post preparing var username=document . getelementsbyname(' username ')[0]的内容。价值；var email=document . getelementsbyname(' email ')[0]。价值；//2.创建XMLHttpRequest对象var xhr=createXhr()；//3、确定请求参数xhr.open ('post '，')。/06-Ajax-reg.php '，true)；xhr . setrequestheader(' Content-Type '，' application/x-www-form-URL encoded ')；//4.重写回调函数xhr . onreadystatechange=function(){ if(this。ready state==4 this . status==200){//使用服务器端返回值var retries=document . getelementbyid(' retries ')；remars . innerhtml=this . responsetext；}} //5、发送请求var内容=' username=' username ' email=' email；xhr.send(内容)；返回false//不跳转到页面}/scriptbody h1不刷新用户注册界面/h1表单on submit=' return reg()；'用户名：input type=' text ' name=' username '/br/邮箱：input type=' text ' name=' email '/br/input type=' submit ' value=' register '/formdiv id=' retries '/div/body/html 06-Ajax-reg . PHP。

代码比较简单，主要判断内容是否为空。如果为空，则返回“内容不完整”，如果不为空，则打印提交的内容并返回“注册成功”。

？Php/** * ajax注册程序* @ authorwebbc */header(' content-type : text/html；charset=utf-8 ')；if(trim($ _ post[' username '])==' ' | | trim($ _ post[' email '])==' '){ echo '内容不完整；} else { print _ r($ _ POST)；回声“注册成功”；}?渲染：

注意事项：

博主以前也用过Jquery的Ajax。当使用$。post函数，他们不需要将请求头的Content-Type内容指定为application/x-www-form-URL encoded，因为jquery是内置的，但是在使用原生Ajax时必须添加，也就是XMLHttpRequest函数。

发送post请求时，XMLHttpRequest必须设置以下请求头：

xhr . setrequestheader(' Content-Type '，' application/x-www-form-URL encoded ')；更多对ajax相关内容感兴趣的读者可以查看本网站专题：《jquery中Ajax用法总结》、《JavaScript中ajax操作技巧总结》、《PHP+ajax技巧与应用小结》和《asp.net ajax技巧总结专题》

我希望这篇文章对ajax编程有所帮助。