First look at the renderings

This is a way to send the login information of html page to php page through ajax using json data. php processes the data and then sends it back to html page for display

js code

<script type="text/javascript">
		$(function(){
			$("#btn").click(function(){
				$.ajax({
	                url:'back.php',
	                type:'post',
	                data:{"username":$("#UN").val(),"password":$("#PAW").val()}, / / assemble json array
	                // Data: $("ාfm"). Serialize(), / / get the array directly from the form form
	                dataType:"JSON",
	                success:function(msg){   
	                    if(msg) {
	                        $("p").append("The account number is:" +  msg.username + "<br />" + "The password is:" + msg.password );
	                    }
	                    else {
	                        alert("Abnormal input!");
	                    }
	                },
	                error:function(){  
	                    console.log("ERROR"); 
	                }
	            });
			});
		});
	</script>

There are many parameters in ajax. Let's take a look at the above parameters: url (path + name of the object you want to transfer); type (transfer method); data (data you want to transfer); note that there are two kinds of data, which are available in two ways to get the data in the form; dataType (transfer data type); success (transfer success); error (transfer failure)
For more parameters, please refer to: http://www.runoob.com/jquery/ajax-ajax.html

php code

<?php
	header("Content-type:text/html;charset=utf-8");
	$user = $_POST["username"];
	$pas = $_POST["password"];
	$json = array("username"=>$user, "password"=>$pas);   //Combine into json array
	$date = json_encode($json);  //Compile array to json data
	echo $date;  //Send json data back to the web page
?>

In the above rendering, we can see that the value obtained from the html page in the php page cannot be displayed in the php page, but this is not an error, and this value can be used. Try this variable directly

Form form

<form id="fm">
	<input type="text" name="username" id="UN" placeholder="enter one user name" />
	<input type="password" name="password" id="PAW" placeholder="Please input a password" />
	<input type="button" id="btn" value="determine" />
	<br />
	<p></p>
</form>