Home > front end >  Beginners small white consult, using ajax after encapsulation, PHP has return data, but the console.
Beginners small white consult, using ajax after encapsulation, PHP has return data, but the console.

Time：11-27



<meta charset="utf-8" & gt;
Ajax encapsulation: the object and packaging & lt;/title> <br/></head> <br/><body> <br/><The button id="get" & gt; Get</button> <br/><The button id="post" & gt; POST</button> <br/><br/><script> <br/>Var get=document. GetElementById (" get "); <br/>Var post=document. GetElementById (" post "); <br/><br/>Get the onclick=function () {<br/>$. Ajax ({<br/>Type: "get", <br/>Url: "ajaxfz/get. PHP," <br/>Data: {<br/>Username: "1515", <br/>Password: "4155451" <br/>}, <br/>Success: the function (info) {<br/>console.log(info); <br/>} <br/><br/>}) <br/>}; <br/><br/>Post. The onclick=function () {<br/>$. Ajax ({<br/>Type: "POST", <br/>Url: "ajaxfz/post1. PHP," <br/>DataType: "json", <br/>Parmas: "username=13 & amp; Password=54321 ", <br/>Success: the function (info) {<br/>console.log(info); <br/>}, <br/>Error: function () {<br/>Fried the console. The log (" server "); <br/>} <br/><br/>}) <br/>}; <br/><br/>/* parameter analysis <br/>Type: get | post, the default value: get <br/>Url: must pass, get requests need the stitching in the address bar of the parameter <br/>Async: whether asynchronous, default true <br/>Data: the parameters of the request, is an object that needs to be converted to string format (example: the username=12 & amp; Password=54321) <br/>Params: the parameters of the request <br/>DataType: response to the data type of the XML/json/text <br/>Success: the success of the () callback function <br/>Error: failed callback function <br/>*/<br/>Var $={<br/>Ajax: the function (options) {//options is an object <br/>//if the params not preach object or of a parameter, directly back to <br/>if (! The options | | typeof options! {<br/>="object")return; <br/>} <br/>//if the type is a post by post processing, if not press the get processing, defaults to get <br/>Var type=options. Type==="POST"? "POST" : "get"; <br/>Var url=options. The url; <br/>if (! Url) {<br/>return; <br/>}; <br/>//if the transfer is not false, then the true, the default is true <br/>Var async=options. Async===false? False: true, <br/>Var data=https://bbs.csdn.net/topics/options.data; <br/>//the parse converts data into params string <br/>//parameters passed <br/>Var params=$. Parse (data); <br/>//response data type <br/>Var dataType=options. DataType; <br/>After the success of the//to do <br/>Var success=options. Success; <br/>//after failing to do <br/>Var error=options. The error; <br/><br/>Var XHR=new XMLHttpRequest (); <br/><br/>//1. Request line, get requests need to be in the address bar splicing parameter <br/>If (type==="get") {<br/>Url=url + "?" + params. <br/>Params=null;//if the parameter has been spliced in the address bar, parameter is set to null <br/>} <br/>XHR. Open (type, url, async); <br/><br/>//2. Request header, a post request need to set the request header <br/>If (type==="POST") {<br/>XHR. SetRequestHeader (" the content-type ", "application/x - WWW - form - urlencoded"); <br/>} <br/><br/>//3. Psot request required parameters, get requests pass null (null) <br/>XHR. Send (params); <br/><br/>//add to monitor, process the response <br/>XHR. Onreadystatechange=function () {<br/>If (XHR. ReadyState===4) {<br/>If (XHR. Status===200) {<br/>//response success <br/>//if success exists (true) implementation success (), there is no (false) does not perform success () <br/>//according to different types of response, you need to do different data processing XML/json/text <br/>Var result=null; <br/>If (dataType==="XML") {<br/>Result=XHR. ResponseXML; <br/>} else if (dataType==="json") {<br/>Result=JSON. Parse (XHR. The responseText); <br/>//the background response back text into a json array or object <br/>} else if (dataType==="text") {<br/>Result=XHR. The responseText; <br/>} <br/>Success & amp; & Success (result); <br/>} else {<br/>//response to the above failure <br/>The error & amp; & Error (XHR. The responseText); <br/>} <br/>} <br/><br/>} <br/><br/><br/>}, <br/>Parse: function (obj) {<br/>//function: converting an object into (username=12 & amp; Password=54321) string <br/>if (! Obj | | typeof obj! {<br/>="object")return null; <br/>} <br/>Var arr=[]; <br/>//object traversal <br/>For (var k in obj) {<br/>Arr. Push (k + "=" + obj [k]);//k as key, obj [k] for value <br/>} <br/>Return arr. Join (& amp; "" );//insert between string & amp; <br/>} <br/>} <br/><br/><br/></script> <br/></body> <br/></html> <br/><br/><pre> </pre> <br/><br/><? PHP <br/>$username=$_GET [' username ']; <br/>$password=$_GET [' password ']. <br/>Echo "get request:". "account:". $username. ", password: ". $password; <br/>?> <br/><br/><p class="article - content rp"> CodePudding user response: </p><img SRC="https://img.codepudding.com/202011/170635270122311.png" Alt=""/><p class="article - content rp"> CodePudding user response: </p><img SRC="https://img.codepudding.com/202011/170635270122312.png" Alt=""/> <br/>Has solved the null with XHR. The responseText can, <img SRC="https://img.codepudding.com/202011/170635270122313.gif" Alt=""/><p class="article - content rp"> CodePudding user response: </p>$. AjaxSetup ({async: false}); Head and try it </div> <div class="th_page th_page_color"></div> <div class="umCopyright"> <p>Page link：<a href="/frontend/88378.html" target="_blank" style="color:#999">https//www.codepudding.com/frontend/88378.html</a></p> </div> <div class="detail-arr"> <div class="detail-arr-left">Prev:<a href='/frontend/88377.html'>Ask, after the success of the ajax implementation, success inside how to execute an SQL update state</a></div> <div class="detail-arr-right">Next:<a href='/frontend/88379.html'>V - for nested loops, show only the first picture, how to solve (from beginner novice)</a></div> </div> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="hot-tags neitags"> <ul> <li><i class="iconfont icon-x-tags"></i> Tags：  </li> <a href='/e/tags/?tagname=Ajax' target='_blank'>Ajax</a> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="xiangguan"> <ul class="msg msghead"> <li class="tbname">Related</li> </ul> <ul> </ul> </div> </div> </div> </div> <div class="container th_top"> <div class="row"> <div class="col-md-12"> <div class="flinks"> <ul> <li><i class="iconfont icon-x-tags"></i> Links：  </li> <li class="liflinks"><a target="_blank" href="/" title="CodePudding">CodePudding</a></li> </ul> </div> </div> </div> </div> <div class="footer"> <p><span style="font-size:16px;color:#666;font-weight: bold">About Us:</span>  <a href="https://www.codepudding.com/contact.html">Contact Us</a>      <a href="https://www.codepudding.com/service.html">Terms of Service</a>      <a href="https://www.codepudding.com/privacy.html"> Privacy Policy</a></p> <p class="foot_info">Copyright © 2010-2023，Powered By <a href="/" target="_blank">CodePudding</a> </p> </div> <script type="text/javascript" src="/skin/code/tianhu.js"></script> </body></html>