从 HTML 表单传递变量 -> ajax load()答案

【问题标题】：Pass variables from HTML form -> ajax load()从 HTML 表单传递变量 -> ajax load()
【发布时间】：2014-10-08 06:45:46
【问题描述】：

我要做什么

我有一个如下所示的 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文件？？？

谢谢

【问题讨论】：

标签： javascript php jquery html ajax

【解决方案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;
}

【讨论】：

嗨，幽灵，非常感谢。我正在尝试实现您建议的代码。只是为了让我正确地做到这一点：（1）脚本的第一部分必须在标签之间的头部，对吗？ (2) displaysearchresults.php 的输出会出现在
和
标签之间的同一页面上，对吧？ (3) php中的html标记是什么意思？再次感谢。
@Guillaume html 标记的意思是，PHP 将创建 html 标签，示例：mysqli_fetch_blah_blah( echo '<tr><td>resulthere</td><tr>'; )。所以这意味着你的 PHP 返回一个标记，因为有些也不这样做。相反，他们发送一个 json。
@Guillaume 1) 是的，您可以将其放在 head 标签内。 2）PHP也可以在同一个php文件或单独的文件上，但这不好，分开php代替。 3) 上面的解释
嗨 Ghost，我分离了 php 文件。现在它只是一个回声“你好”；。我希望在单击提交按钮后显示在
和
标记之间。但它只是没有发生。就是一个简单的脚本，不知道怎么回事……我在head部分插入了，对应的jquery文件就在那里...我不明白...
@Guillaume 在这里，我已经为你设置了一个演示，这样你就可以看到它是如何工作的codepad.viper-7.com/Xjnlzg

【解决方案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 之间。

相当不错。

初学者注意：不要忘记将 jquery 文件复制到您的根文件夹，否则 ajax 将无法正常工作。

【讨论】：