优先导入JQ后再使用Ajax
文件下载
JQ是ajax的依赖，不导入根本就用不了。
可以试试下面方法进行jq的安装：
下面是下载的界面，或者说存放jq代码的页面。
可以点我直接跳转到7版本的jq进行复制
导入jq到文件当中
导入的方式分两种，一种是在线导入，一种是使用离线版本，也就是本地面版本。
在线版本jq导入文件的方式如下：
<script src='https://code.jquery.com/jquery-3.7.1.min.js'></script>
离线版本，也就是本地版本导入如下：
# 假设你的存放路径是 path/source/js ，采用下面方法导入：
<script src='path/source/js/jquery-3.7.1.min.js'></script>
使用时分离jq与php
错误的调用jq导致的页面获取参数紊乱
重中之重！重中之重！最近写网站的时候莫名其妙的出现了反弹出来的jq一直是个页面，先给你看看错误的情况是什么样子的：
错误示范
测试脚本：cs5.php，将html和ajax柔和在一个页面当中。
<!DOCTYPE html>
<html>
<head>
<script src="../source/js/jquery-3.7.0.min.js"></script>
<title>AJAX Example</title>
<script>
$(document).ready(function() {
$("#button").click(function() {
$.ajax({
url: "cs5.php?a=1",
type: "POST",
data: { a: 1 },
success: function(response) {
$("#contents").html(response);
},
error: function(xhr, status, error) {
console.log("An error occurred: " + error);
}
});
});
});
</script>
</head>
<body>
<h1>AJAX Example</h1>
<button id="button">Click Me</button>
<div id="contents"></div>
</body>
</html>
<?php
echo @$_GET['a'];
?>
正常访问：
一旦传参，问题就来了：
这就是将jq传参文件和你的页面合在一起的坏处，而且是非常的严重！
下面是解决办法：
正确的调用JQ
想要避免出现传参混乱的情况，有一种解决办法：
首先，当前php或html文件调用了jq。
其次，写出另外一个接收参数的执行文件，专门处理传参问题。
正确示范
写个测试文件：
index.php:
<!DOCTYPE html>
<html>
<head>
<script src="../source/js/jquery-3.7.0.min.js"></script>
<title>AJAX Example</title>
<script>
$(document).ready(function() {
$("#button").click(function() {
$.ajax({
url: "cs2.php",
type: "POST",
data: { a: 1 },
success: function(response) {
$("#contents").html(response);
},
error: function(xhr, status, error) {
console.log("An error occurred: " + error);
}
});
});
});
</script>
</head>
<body>
<h1>AJAX Example</h1>
<button id="button">Click Me</button>
<div id="contents"></div>
</body>
</html>
再写一个config.php
<?php
echo "<div style='color: red;background-color: #cfd05d'>".@$_POST['a']."</div>";
?>
下面一步步看效果：
点击按钮进行测试：
这样子就算是成功了。
2796
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
