Javascript 从HTML表单传递变量->；ajax加载（）

我想做的事

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

我到目前为止所做的事情

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

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

函数搜索结果（id）{
$（'#myStyle'）.load（'displaysearchresults.php？id='+id；？>）；
}

结果将显示在div中，这正是我想要的：

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

问题

上面的脚本工作得很好（我在其他地方使用了它的变体）。但我有两个问题：

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

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

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

---

谢谢

由于您输入了一个拼写错误，目前无法使用：

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

在这里：

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

$('#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;
}

---

好的，我已经能够做我想做的事情了，也就是说，在页面的一部分显示搜索结果，而无需重新加载

实际上，没有必要使用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>

$（文档）.ready（函数（）{
$（'#form'）。关于（'submit'，函数（e）{
e、 preventDefault（）；//防止表单重新加载
$.ajax({
url:'displaysearchresults.php'，
键入：“POST”，
数据类型：“html”，
数据：{text:$（'#textbox'）.val（）}，
成功：功能（响应）{
$（'#myStyle'）.html（回复）；
}
});
});
});

那么这是在做什么：

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

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

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

很好

---

开始者注意：不要忘记将jquery文件复制到根文件夹，否则ajax将无法工作。

Hi Ghost，非常感谢。我正在尝试实现您建议的代码。为了让我能正确地完成它：（1）脚本的第一部分必须在和标记之间的head部分，对吗？（2） displaysearchresults.php的输出将出现在和标记之间的同一页面上，对吗？（3） php中的html标记是什么意思？再次感谢。@Guillaume我所说的html标记的意思是，PHP将创建html标记，示例：

mysqli_fetch_blah_blah（echo'resulthere'）

。这意味着您的PHP将返回一个标记，因为有些PHP也不会这样做。相反，他们发送了一个json。@Guillaume 1）是的，你可以把它放在head标签中。2） PHP也可以位于同一个PHP文件上，也可以位于单独的PHP文件上，但这并不好，请将PHP分开。3） 在上面的解释中，我分离了php文件。现在，它只是一个回声“你好”；。我希望在单击submit按钮后，会在和标记之间显示。但这并没有发生。这是一个简单的脚本，我不知道怎么了。。。我在head部分插入了，相应的jquery文件就在那里。。。我不明白…@Guillaume在这里，我已经为你设置了一个演示，让你看看它是如何工作的

<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>