Sending value to a page using AJAX, form action does not work

问题

Good day, I am trying to send data to a page using AJAX, I used ajax because I need the html content of a text area (I used tiny mce plugin text editor), I want to pass the value of the text area and then load it to the page. But then I inspect it and gone to the network XHR, i found out that the page sent the ajax data but its not redirecting to the other page and also my input which has a name of 'title' didn't send the data to the page. Any idea how to fix this? here's my code. Thanks for responding

HTML:

<form class="well" action="lessons/add_lesson.php?user_id=<?php echo $user_id; ?>" method="post" role="form">
    <div class="form-group">
        <input type="text" name="title" id="title" tabindex="2" class="form-control" required="true"
        maxlength="24" placeholder="Title">
    </div>

    <div class="form-group">
        <label for="content">Content:</label>
        <textarea id="content" name="content" class="tinymce" placeholder="Content" id="comment"></textarea>
    </div>

    <input type="hidden" name="token" value="<?php echo Token::generate(); ?>">

    <div class="form-group">
        <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <input type="submit" name="submit" class="btn btn-primary btn-block" id="update_account" href="#" data-target="updateAccount" value="Create">
        </div>
        <div class="col-md-4"></div>
        </div>
    </div>
</form>

AJAX/JQuery

<script>
    $(document).ready(function(){
        $('form').submit(function(e){
            //save button
            var btn_submit = $(this).find('submit');


            e.preventDefault();
            tinyMCE.triggerSave();
            var content = tinymce.get("content").getContent();
            $.ajax({
                type: 'POST',
                url: 'lessons/add_lesson.php?user_id=<?php echo $user_id; ?>',
                dataType: 'html',
                data: { data: 'fuck' },
                success: function(data){
                }
            });

        });
    });
</script>

Here is the network response

回答1:

You are not actually sending any of your form data. PHP doesn't receive a value for title and therefore complains that (my guess) $_['POST']['title'] does not exist.

Add your title and content values to the data object in the $.ajax call:

$.ajax({
    type: 'POST',
    url: 'lessons/add_lesson.php?user_id=<?php echo $user_id; ?>',
    dataType: 'html',
    data: { 
        // add this:
        title: $('#title').val(),
        content: content
    },
    success: function(data){
    }
});

来源：https://stackoverflow.com/questions/45128663/sending-value-to-a-page-using-ajax-form-action-does-not-work

标签

php

html

ajax

tinymce