jQuery - AJAX get() and post() methods
HTTP Request: GET vs. POST
Two common methods of request-response on the client and server sides are: GET and POST.
GET - Request data from the specified resource POST - Submit the data to be processed to the specified resource
GET is basically used to obtain (retrieve) data from the server. Note: The GET method may return cached data.
POST can also be used to get data from the server. However, the POST method does not cache data and is often used to send data along with the request.
The difference between Get and Post
Get method:
Use get method Simple data can be transmitted, but the size is generally limited to 1KB. The data is appended to the URL and sent (HTTP header transmission). That is to say, the browser appends each form field element and its data to the request line in the format of the URL parameters. behind the resource path. The most important thing is that it will be cached by the client's browser, so others can read the customer's data, such as account number and password, etc. from the browser's history. Therefore, in some cases, the get method can cause serious security issues.
Post method:
When using the POST method, the browser sends each form field element and its data as the entity content of the HTTP message. To the web server instead of passing it as a parameter of the URL address, the amount of data transmitted using POST is much larger than that transmitted using GET.
In short, the GET method transmits a small amount of data, high processing efficiency, low security, and will be cached, while the opposite is true for POST.
$.get() Method The
$.get() method requests data from the server via an HTTP GET request.
Syntax:
$.get(URL,callback);
Required URL The parameters specify the URL you wish to request.
The optional callback parameter is the name of the function executed after the request is successful.
The first parameter to<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.get("/try/ajax/demo_test.php",function(data,status){ //需要引入demo_test.php文件
alert("数据: " + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个GET 请求并获取返回结果</button>
</body>
</html>$.get() is the URL we wish to request ("demo_test.php").
The second parameter is the callback function. The first callback parameter stores the content of the requested page, and the second callback parameter stores the status of the request.
This PHP file ("demo_test.php") is similar to this:
<?php echo "这是个从PHP文件中读取的数据"; ?>
##$.post() Method The $.post() method requests data from the server via an HTTP POST request. Syntax:
$.post(URL,data,callback);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.post("/try/ajax/demo_test_post.php",{
name:"php中文网",
url:"http://www.php.cn"
},
function(data,status){
alert("数据: \n" + data + "\n状态: " + status);
});
});
});
</script>
</head>
<body>
<button>发送一个 HTTP POST 请求页面并获取返回内容</button>
</body>
</html>$.post() The first parameter is the URL we wish to request ("demo_test_post.php"). Then we send the data along with the request (name and city). The PHP script in "demo_test_post.php" reads these parameters, processes them, and returns the results. The third parameter is the callback function. The first callback parameter stores the content of the requested page, while the second parameter stores the status of the request. This PHP file ("demo_test_post.php") is similar to this: <?php $name = isset($_POST['name']) ? htmlspecialchars($_POST['name']) : ''; $city = isset($_POST['url']) ? htmlspecialchars($_POST['url']) : ''; echo '网站名: ' . $name; echo "\n"; echo 'URL 地址: ' .$city; ?>
A complete $.post() instance:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function checkname(){
if($('#name').val() == ""){
$('#msg').html("please enter the name!");
$('#name').focus;
return false;
}
if($('#address').val() == ""){
$('#msg').html("please enter the address!");
$('#address').focus;
return false;
}
ajax_post();
}
function ajax_post(){
$.post("text.php",{name:$('#name').val(),address:$('#address').val()},
function(data){
//$('#msg').html("please enter the name!");
//alert(data);
$('#msg').html(data);
},
"text");
}
</script>
</head>
<body>
<form id="ajaxform" name="ajaxform" method="post" action="text.php">
<p>
name<input type="text" name="name" id="name"/>
</p>
<p>
address<input type="text" name="address" id="address"/>
</p>
<p id="msg"></p>
<p>
<input name="Submit" type="button" value="submit" onclick="return checkname()"/>
</p>
</form>
</body>
</html>Create a text.php file: <?php $name = $_POST["name"]; $address = $_POST["address"]; echo $name."<br>"; echo $address."<br>"; echo "success"; ?>
![Front-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Zero-based front-end course [Vue advanced learning and practical application]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![WEB front-end tutorial [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Apipost practical application [api, interface, automated testing, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
