Php queries mysql Data, returns the result in JSON format, extracts the data in JSON, and writes the data to different idnumbers on the page.

There is a question: how to extract the information and write it into different parts of the webpage when AJAX is used to return data?
In W3CSCHOOL, we mentioned that the data returned by AJAX is in JSON format. I use PHP as the background script.
At first, I assembled the data in JSON format, but the effect was poor. Later, I used the json_encode () function in PHP to query the information,

$ Str is the data to be processed. You can use the following statement to output data in json format,

Here, JSON_NESCAPED_UNICODE refers to the encoding in UNICODE format,

The manual says that "this function can only accept UTF-8-encoded data" in many formats

echo json_encode($row,JSON_UNESCAPED_UNICODE);

The front-end page initiates an ajax request. The core part is to process the ajax returned data xmlHttp. respondText,

Use this statement to process txt = xmlHttp. responseText; var obj = eval ("(" + txt + ")"); where the eval function is the key.

The eval () function uses a JavaScript compiler that parses JSON text and generates JavaScript objects. Text must be enclosed in parentheses to avoid syntax errors:

The ajax Request Code is as follows:

var xmlHttp=nullfunction get_pic(str){ /*search the file in mysql table pydot and pydot_g,then give the result to front page.start ajax request*/xmlHttp=GetXmlHttpObject()if (xmlHttp==null) { alert ("Browser does not support HTTP Request") return }var url="Public/Js/json.php";url=url+"?q="+str.innerHTMLurl=url+"&sid="+Math.random()//alert(url)xmlHttp.onreadystatechange=stateChanged xmlHttp.open("GET",url,true)xmlHttp.send(null)}function stateChanged() { var txt,x;if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") { txt=xmlHttp.responseText ;   //alert(txt)var obj = eval ("(" + txt + ")");document.getElementById("other").innerHTML=obj.other;document.getElementById("title").innerHTML=obj.title; } }function GetXmlHttpObject(){var xmlHttp=null;try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); }catch (e) { //Internet Explorer try  {  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");  } catch (e)  {  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  } }return xmlHttp;}

From the code, we can see that obj. title extracts the title information in the returned text and writes it to the element id = 'title' on the page.