真实可行的jQuery中$.post()的使用方法
$.post()的使用方法
目录
一、出BUG的看这里
1. jQuery框架把Ajax封装成$.post()方法。
但此方法，默认为异步请求。如果用作同步传输数据，会出现时间差，需要改成同步请求！
$("#submit").click(function(){
$.ajaxSettings.async = false; //设置为同步请求
$.post("post.php", {"data": "cxcxrs"}, function(data){}, "json");
$.ajaxSettings.async = true; //设置为异步请求
});2. $.post()方法中把传输类型设为"json"，前后端都用json格式传输数据。试过不设传输类型，然后在后端php页面直接echo true返回数据，结果js中得到的true是一个极其“诡异”的字符串（竟然自带换行）。
3. 后端如果使用PHP语言，必须使用纯PHP代码！（即后端PHP代码不要有html混杂。）
4. 浏览器如果没有自动更新js文件！ 注意清理缓存！ 这点很重要！！！（就是因为没清缓存，昨天可把自己坑坏了....）
二、$.post()用法详解
1. 基本语法
注意：一般下图的jQuery用$符号代替。
2. 代码实例
用$.post()方法实现前后端交互需要建三个文件： post.html、post.js、post.php
- 首先是： post.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<form>
用户名: <input type="text" id="username">
<button type="submit" id="btn">提交</button>
</form>
</body>
<script src="jquery-1.8.3.min.js"></script>
<!-- 注意jQuery框架需要在其他js文件之前应引入 -->
<script src="post.js"></script>
</html>在post.html页面中，建一个表单，并在其中创建一个id为"username"的文本框，和一个id为"btn"的提交按钮。
接着在body标签之后引入两个js文件：jQuery框架和post.js。 注意：jQuery框架必须在js文件之前引用。
- 其次是： post.js页面
$("#btn").click(function(){
var username = $("#username").val(); //获取post.html页面，文本框中用户输入的内容。并赋值给变量username。
$.ajaxSettings.async = false;
$.post("post.php", {"data": username}, function(info){ //info 为post.php页面返回的数据
if(info.t){
alert(info.t); //info.t 调用post.php页面传回的json数据值，等价于info["t"]
}
else{
alert(info.f);
};
}, "json");
$.ajaxSettings.async = true;
});
html页面点击提交按钮，可将表单内的数据传到post.js页面。接着开始用$.post()方法向后端传数据。
上述代码中：
$.post("post.php", {"data": username}, function(info){函数内语句}, "json")
(1) “post.php”： 把数据传输到post.php页面。
(2) {"data": username}： 要传给post.php页面的数据。这是json格式的数据，数据的键为"data", 数据的值为username。
注：json格式，{"键": "值"}。 例如，{"data": "cxcxrs"}。
键和值必须都是字符串！不是字符串的外面加双引号变成字符串！
示例中，变量username中赋值的数据就是字符串类型，所以username不用加双引号。
(3) function(info){函数内语句}：
这是回调函数。即后端post.php页面返回数据时，就会自动调用这个函数。
函数的形参info，就是后端post.php页面返回的数据。
例如： 后端返回的数据为{"t": "true"}， 则用 info.t 获得数据中的值"true"。
(4) "json"： 限制数据传输格式为json格式。 即前端、后端传输数据都要用json格式。
- 最后是： post.php页面
// 注意使用$.post()方法, 后端必须使用纯PHP代码！（即PHP代码不能嵌套在html页面中）
<?php
$info = $_POST["data"];
if($info=="cxcxrs"){
echo '{"t": "true"}'; //把数据传回post.js页面的回调函数中，变成它的参数info。
}else{
echo '{"f": "false"}'; //把数据传回post.js页面的回调函数中，变成它的参数info。
}
?>后端post.php页面，用$_POST[数据的键]来获取post.js页面传来的数据。
上述代码中：
（1）$_POST["data"]： post.js页面传过来{"data": username}数据，
用$_POST["data"]就能获取数据中的值username。 即 $_POST["data"]=username。
（2）判断语句中：
如果传过来数据的值等于"cxcxrs"，则用echo返回json格式数据 '{"t": "true"}' 给前端，即变成前端回调函数的inifo参数，前端用info.t得到值"true"。 若不等于，则返回'{"f": "false"}'，前端用info.f得到值"false"。
注意：
(a) post.php页面直接用echo返回数据给post.js页面。
(b) echo后面需要接字符串，所以json格式数据外面要再加一对单引号。例如： echo '{"t": "true"}'
3. 数据传输流程总结：
"==>"， 意思是把数据传输到哪儿。
html页面提交表单 ==> js页面采用$.post()方法 ==> php页面用echo ==>数据回到post.js页面的回调函数中。
举个例子： 在html页面输入用户名==>js页面把用户名传给php页面==>php页面验证用户名是否存在==>js页面根据php返回的结果，用alert在浏览器中提示用户已存在 / 不存在。
三、后记
$.post()的基础使用方法，到这里就告一段落啦~
用到$.post()方法的起因，是想帮朋友编一道前后端交互的网络安全题。
虽然最后我编的题没能用上，但还是感到很开心。因为她竟然靠自己写了一道题！！！哈哈哈小姑娘有进步有进步！
这篇博客就写到这儿啦，
有问题欢迎留言，喜欢的可以点赞收藏哦~
感谢阅读！
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
15
0- 0
已为社区贡献2条内容
所有评论(0)