Question

我遇到一些脚本问题，无需刷新页面即可通过AJAX执行功能。我有一个用户输入外部URL的字段，当他们点击提交时，会弹出一个模态窗口，其中一些信息是通过一个单独的PHP页面生成的（目前是images.php）。我实际提交了表单时脚本工作，页面重新加载，images.php能够看到index.php？url =无论如何，但我正在尝试更新页面而不必刷新。在定义变量后是否需要重新呈现DIV？我想这可能是我遇到问题的地方。

JS

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

请帮忙。

Answer 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.
    });
});

Answer 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);查看正在发送的请求变量。

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

Answer 4

不应该

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

是

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

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

4 个答案: