$.post()的使用方法

目录

$.post()的使用方法

一、出BUG的看这里

二、$.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()方法的起因，是想帮朋友编一道前后端交互的网络安全题。

虽然最后我编的题没能用上，但还是感到很开心。因为她竟然靠自己写了一道题！！！哈哈哈小姑娘有进步有进步！

这篇博客就写到这儿啦，

有问题欢迎留言，喜欢的可以点赞收藏哦~

感谢阅读！

Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

【目标检测】目标检测的一些常用神经网络模型及方法

我的阶段性总结????文章目录1.概述1.2 目标检测的任务1.3 目标检测的分类2.R-CNN系列2.1 [R-CNN（Region with CNN features）](https://arxiv.org/pdf/1311.2524.pdf)2.2 [Fast R-CNN](https://www.cv-foundation.org/openaccess/content_iccv_2015/

avatar GitCode 开源社区
cover

用C++实现4种YOLO目标检测（内附完整代码）

avatar GitCode 开源社区
cover

静态时序分析：SDC约束命令create_generated_clock详解（上）

avatar GitCode 开源社区