Question

我想做什么

我有一个HTML表单，如下所示： [输入文字字段] [提交按钮]。我希望输出结果只显示在页面的一小部分中（不想在单击按钮后刷新整个页面）。

到目前为止我做了什么

我正在使用jquery load（），如下所示：

<script type="text/javascript">
function searchresults(id) {
$('#myStyle').load('displaysearchresults.php?id=' + id ; ?>);
}
</script>

结果将出现在div中，这正是我想要的：

<div id='myStyle'></div>

问题

上面的脚本运行得很好（我在别处使用了它的变体）。但我有两个问题：

1 - 如何从表单中调用load（）脚本。我尝试了这个，但它不起作用：

<form id="form" name="form" method="post" action="searchresults('1')">

2 - 如果我无法从表单调用load（）脚本，如何将输入文本字段中的内容传递给load（）脚本，以便最终可以由displaysearchresults进行处理。 php文件???

由于

Answer 1

目前它没有工作，因为你有一个拼写错误：

function searchresult(id) {
                   /^ no s
    $('#myStyle').load('displaysearchresults.php?id=' + id ; ?>);
}

下面：

action="searchresults('1')"> // this should be on the onsubmit
                    ^

由于您打算在不重新加载的情况下提交表单，您可以执行以下操作：

$('#form').on('submit', function(e){
    e.preventDefault();
    $.ajax({
        url: 'displaysearchresults.php',
        data: {id: 1},
        type: 'POST',
        success: function(response) {
            $('#myStyle').html(response); // assuming the markup html is already done in PHP
        }
    });
});

当然在PHP方面，只需将其称为普通的POST变量：

if($_SERVER['REQUEST_METHOD'] == 'POST') {
    $id = $_POST['id'];
    // other stuff you have to do
    // echo markup stuff
    exit;
}

Answer 2

好的，我已经能够做我想做的事情，即在不重新加载的情况下在页面的一部分显示搜索结果。

实际上没有必要使用ajax load（）函数。您可以使用以下脚本执行此操作：

<form id="form" method="POST">
<input type="text" id="textbox" name="textbox" />
<input type="submit" name="test" />
</form>
<div id="myStyle"></div>
<p>
<script src="jquery-1.10.2.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#form').on('submit', function(e){
e.preventDefault(); // prevent the form from reloading
$.ajax({
url: 'displaysearchresults.php',
type: 'POST',
dataType: 'html',
data: {text:$('#textbox').val()},
success: function(response) {
$('#myStyle').html(response);
}
});
});
});
</script>

那是做什么的：

它将“读取”用户在文本框中输入的内容，

当用户点击“提交”按钮时，它会将其放入POST变量并将其发送到“displaysearchresults.php”而不重新加载页面，

搜索结果将显示在“mystyle”div之间。

非常好。

对于beginers的注意事项：不要忘记将jquery文件复制到根文件夹，否则ajax将无法正常工作。

从HTML表单传递变量 - ＆gt; ajax load（）

2 个答案: