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

Question

I'm having an issue with some script to perform a function via AJAX without refreshing my page. I have a field for a user to enter an external URL, and when they click submit it pops up a modal window, with some information generated through a separate PHP page (images.php currently). I have the script working when the form is actually submitted, the page reloads, and images.php is able to see index.php?url=whatever, but I'm trying to update the page without having to refresh. Do I need to re-render the DIV after defining the variable? I think this may be where I'm having problems.

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 (aside from form being submitted to this, this is also included in the modal, which opens, but returns NULL on var_dump($postUrl))

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

I could definitely be missing something glaring here, but honestly I've tried every combination of AJAX example I could find on here. Am I missing a huge step about having PHP get the variable? Do I need to refresh a DIV somewhere?

Please help.

Answer 1

Here is a bit neater version of the same code, with the missing quote corrected.

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