AJAX新手。有点不确定如何在不重新加载整个页面的情况下提交GET请求。
- 用户访问
www.example.com/products/
- 类型的园艺工具`
- 结果加载内联,URL更改为
www.example.com/products/results?search=Gardening+Tools
,所有操作都无需重新加载页面 - 任何用户都可以使用URL
www.example.com/products/results?search=Gardening+Tools
并获得相同的结果
注意:要点4很重要。这一定不是一种将参数添加到URL中以使其看起来像这样的方法。有些用户可能想要添加书签(此外,这也是我最初使用GET
请求的原因(。
因此,以下是适用于POST
:的代码的基本表示
表单:您使用POST
提交的基本内容,我希望它是GET
。
<form id="submit" action="" method="POST">
<input type="text" name="search"/>
<button type="submit"></button>
</form>
jQuery:使用.ajax()
,我们向/products/results.php
发送POST
请求
$('form#submit').submit(function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: 'results.php',
data: "search="+encodeURIComponent($('input[name="search"]').val()),
dataType: 'json',
success: function(data) {
//inject some html into page
}
});
}
results.php:(也是为了确保我在这里受到了SQL注入的保护吗?神奇的引号是关闭的(。
$query = $_POST['search'];
$query = mysql_real_escape_string($query);
$query = htmlspecialchars($query);
//you get the point: straight forward db connect, query and return as json
因此,我尝试将所有的POST
更改为GET
,但没有成功。有什么概念我不理解吗?
我认为这可能与$('form#submit').submit(function (e)
和preventDefault((函数有关。但是,阻止页面重新加载需要preventDefault。
<input type="text" name="search" id="search"/>
和
$('form#submit').submit(function (e) {
e.preventDefault();
var search = $('#search').val();
$.ajax({
type: 'POST',
url: 'results.php',
data: {search:search},
dataType: 'json',
success: function(data) {
//inject some html into page
}
});
}
表单:-使用AJAX 不需要操作和方法
<form id="form1">
<input type="text" class='search' name="search"/>
<button type="button" onclick="funcAjax()">Load Results</button>
</form>
jQuery:-这里我们将定义函数"funcAjax(("。
xmlhttp.responseText是从php页面返回的值
function funcAjax()
{
//value to be searched
var searchVal= $('.search').val();
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
//xmlhttp.responseText is the value returned from your php page
}
}
xmlhttp.open("GET","results.php?q="+searchVal,true);
xmlhttp.send();
}
results.php:
$query = $_GET['q'];
//rest follow your code