通过 AJAX/PHP 提交 URL 设置变量而不刷新页面，加载变量答案

【问题标题】：Submit URL via AJAX / PHP set variable without refreshing page, load variable通过 AJAX/PHP 提交 URL 设置变量而不刷新页面，加载变量
【发布时间】：2014-03-19 02:29:57
【问题描述】：

我在不刷新页面的情况下通过 AJAX 执行功能的某些脚本出现问题。我有一个供用户输入外部 URL 的字段，当他们单击提交时，它会弹出一个模式窗口，其中一些信息是通过单独的 PHP 页面（当前为 images.php）生成的。当表单实际提交时，我的脚本工作，页面重新加载，并且 images.php 能够看到 index.php?url=whatever，但我正在尝试更新页面而无需刷新。定义变量后是否需要重新渲染 DIV？我认为这可能是我遇到问题的地方。

<script type="text/javascript">
$(function() {
$("#newNote").submit(function() {

var url = "images.php"; // the script where you handle the form input.
var noteUrl = $('#noteUrl).val();
$.ajax({
       type: "POST",
       url: url,
       data: {noteUrl: noteUrl},
       success: function(data)
       {
           alert(data); // show response from the php script.
       }
     });

return false; // avoid to execute the actual submit of the form.
});
});
</script>

HTML

<form id="newNote">
<input type="text" class="form-control" id="noteUrl">
<input type="button" class="btn btn-default" id="addNote" data-toggle="modal" data-target="#noteModal" value="Add Note"/>
</form>

PHP（除了提交到这个的表单之外，它也包含在模式中，它打开，但在 var_dump($postUrl) 上返回 NULL）

$postUrl = $_REQUEST['noteUrl'];
echo $postUrl;

我肯定会在这里遗漏一些明显的东西，但老实说，我已经尝试了在这里可以找到的 AJAX 示例的所有组合。我是否错过了让 PHP 获取变量的一大步？我需要在某处刷新 DIV 吗？

请帮忙。

【问题讨论】：

更改 var noteUrl = $('#noteUrl).val();到 var noteUrl = $('#noteUrl').val(); - 缺少报价

标签： javascript php jquery ajax

【解决方案1】：

这是相同代码的一个更简洁的版本，已更正了缺少的引号。

$(function() {
    $("#newNote").submit(function() {
        $('#notePreview').empty();
        var url = "images.php"; // the script where you handle the form input.
        var noteUrl = $(this).find('#noteUrl').val();

        var request = $.ajax({
           type: "POST",
           url: url,
           data: {noteUrl: noteUrl}
        });

        request.done(function(data) {
           $('#notePreview').append(data);
        });

        return false; // avoid to execute the actual submit of the form.
    });
});

【讨论】：

这太棒了！正是我需要的。我为最终产品添加了一些东西，以防有人将此线程视为他们问题的答案。谢谢，@LShetty。
@KevinO'Brien，很高兴我能帮上忙 :)

【解决方案2】：

将属性name="noteUrl" 添加到您的输入中

<form id="newNote">
<input type="text" class="form-control" name="noteUrl" id="noteUrl">
<input type="button" class="btn btn-default" id="addNote" data-toggle="modal" data-target="#noteModal" value="Add Note"/>
</form>

您也可以通过var_dump($_REQUEST); 来查看正在发送的请求变量。

【讨论】：

我添加了name="noteUrl"，但无济于事。当我 var_dump($_REQUEST);我刚刚得到：array(3) { ["__utma"]=> string(55) "218755011.1844378823.1395071644.1395071644.1395071644.1" ["__utmc"]=> string(9) "218755011" ["__utmz"]=> string(70) "218755011.1395071644.1.1.utmcsr=(direct)|utmccn=(direct)|utmcmd=(none)" }
如果你var_dump($_POST)怎么办？此外，使用 Web 浏览器中的开发人员工具工具（F12 键）查看是否正在发送 http 请求。示例：i.imgur.com/y9WBQsx.png
我在发送的标头信息中没有看到任何内容。 var_dump($_POST) 显示一个空数组。
jsfiddle.net/fgJP8 此代码在客户端运行良好，并将 POST/REQUEST 数据发送到 url。确保您有 name="noteUrl" 区分大小写。
是否可以将 POST/REQUEST 数据加载到同一页面上？如果我include ('images.php');可以echo $noteUrl;在同一页面，都不用刷新吗？

【解决方案3】：

您可能错过了 noteUrl 作为名称。尝试给出如下名称并使用相同的名称获取它。你的情况是noteUrl

<form id="newNote">
<input type="text" class="form-control" name="noteUrl" id="noteUrl">
<input type="button" class="btn btn-default" id="addNote" data-toggle="modal" data-target="#noteModal" value="Add Note"/>
</form>

【讨论】：

我添加了name="noteUrl"，但没有任何改变。
你打算只使用一个字段还是多个字段？你打算只得到noteUrl吗？在这种情况下，只需在 ajax 中单独发送此值，而不是序列化所有字段
你说得对，我已经更新了我的帖子。我仍然没有运气。

【解决方案4】：

不应该这样

var noteUrl = $('#noteUrl).val();

是

var noteUrl = $('#noteUrl').val();
                        ^^^

【讨论】：