jQuery使用Ajax将json传至php处理

最新推荐文章于 2025-06-19 14:35:59 发布

Close_Wall

最新推荐文章于 2025-06-19 14:35:59 发布

阅读量3.2k

点赞数 1

CC 4.0 BY-SA版权

文章标签： jquery php

本文链接：https://blog.youkuaiyun.com/suorce/article/details/82957463

本文介绍了一个使用AJAX将HTML登录信息通过JSON数据发送给PHP页面的示例，展示了如何在PHP中处理并返回数据到HTML页面进行显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看效果图
在这里插入图片描述

这是一个将html页面的登录信息通过ajax使用json数据发送给php页面，php将数据处理后又将数据传回html页面显示

js代码

<script type="text/javascript">
		$(function(){
			$("#btn").click(function(){
				$.ajax({
	                url:'back.php',
	                type:'post',
	                data:{"username":$("#UN").val(),"password":$("#PAW").val()},   //拼装json数组
	                // data:$("#fm").serialize(),   //直接从form表单中取出数组
	                dataType:"JSON",
	                success:function(msg){   
	                    if(msg) {
	                        $("p").append("账号为：" +  msg.username + "<br />" + "密码为：" + msg.password );
	                    }
	                    else {
	                        alert("输入异常!");
	                    }
	                },
	                error:function(){  
	                    console.log("ERROR"); 
	                }
	            });
			});
		});
	</script>

ajax中有许多参数，我们就看看上面有的几个参数：url（你要传输对象的路径+名称）；type（传输方式）；data（你要传输的数据）注意这里有两个data，是两种获取表单中数据的方法都可用；dataType（传输的数据类型）；success（传输成功）；error（传输失败）
更多参数请参考：http://www.runoob.com/jquery/ajax-ajax.html

php代码

<?php
	header("Content-type:text/html;charset=utf-8");
	$user = $_POST["username"];
	$pas = $_POST["password"];
	$json = array("username"=>$user, "password"=>$pas);   //组合成json数组
	$date = json_encode($json);  //编译数组转化为json数据
	echo $date;  //将json数据传回网页
?>

在上面的效果图中我们可以看到，在php页面中从html页面获取的值在php页面是无法显示的，但这并不是错误的，这个值是可以使用的。直接试用该变量即可

form表单

<form id="fm">
	<input type="text" name="username" id="UN" placeholder="请输入用户名" />
	<input type="password" name="password" id="PAW" placeholder="请输入密码" />
	<input type="button" id="btn" value="确定" />
	<br />
	<p></p>
</form>