数据未通过AJAX调用发送

Question

I am having difficulties with an AJAX call. I am trying to send over the id of the user who is making the announcement and then the message. For some reason the user_id is not sending over. The message is sending over, but I am getting an error saying it has an undefined index, but I process all of the contents into another file and the message is going through. I am trying to use a session of the user's id for that to send through, but I have also tried doing a SELECT query and sending it that way and it still doesn't send.

Here is my session code..

$userid = ( isset( $_SESSION['user'] ) ? $_SESSION['user'] : "" );

What am I doing wrong that is making the userid not send through and for my query to not send to my database?

$(document).ready(function(){ 
             $("#submit_announcement").on("click", function () {

             var user_message = $("#announcement_message").val();
                $user = this.value;
                $.ajax({ 
                    url: "insert_announcements.php", 
                    type: "POST",
                    //data : 
                    //{'message':message,'anothermessgae':another}
                    data: {
                           "user_id": $user,
                                        "message": user_message
                            },
                    success: function (data) {
                           //  console.log(data); // data object will return the response when status code is 200
                             if (data == "Error!") {
                                 alert("Unable to get user info!");
                                 alert(data);
                             } else {
                                 $(".announcement_success").fadeIn();
                                 $(".announcement_success").show();
                                 $('.announcement_success').html('Payment Status Changed!');
                                 $('.announcement_success').delay(5000).fadeOut(400);
                             }
                         },
                         error: function (xhr, textStatus, errorThrown) {
                             alert(textStatus + "|" + errorThrown);
                             //console.log("error"); //otherwise error if status code is other than 200.
                         }
                     });
                 });
             });

Form

  <div class="announcement_success"></div>
        <p>Add New Announcement</p>
            <form action="" method="POST" id="insert_announcements">
            <input type="hidden" value="<?php echo $userid; ?>" id="approved_id" name="user_id" />
                <textarea rows="4" cols="50" id="announcement_message" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
                <label for="contactButton">
                    <button type="button" class="contactButton" id="submit_announcement">Add Announcement</button>
                </label>
            </form>

insertannouncements.php

$announcement_user_id= $_POST['user_id'];
$announcement_message= $_POST['user_message'];
//$test = print_r($_POST, true); 
//file_put_contents('test.txt', $test); 
//var_dump($announcement_user_id);

$con = mysqli_connect("localhost", "", "", "");
$stmt2 = $con->prepare("INSERT INTO announcements (user_id, message, date) VALUES (?, ?, NOW())");
    if ( !$stmt2 || $con->error ) {
        // Check Errors for prepare
         die('Announcement INSERT prepare() failed: ' . htmlspecialchars($con->error));
    }
    if(!$stmt2->bind_param('is', $announcement_user_id, $announcement_message)) {
        // Check errors for binding parameters
        die('Announcement INSERT bind_param() failed: ' . htmlspecialchars($stmt2->error));
    }
    if(!$stmt2->execute()) {
        die('Announcement INSERT execute() failed: ' . htmlspecialchars($stmt2->error));
    }
        //echo "Announcement was added successfully!";
    else
    {
         echo "Announcement Failed!";
    }
?>

I get the following error

<b>Notice</b>:  Undefined index: user_message in <b>/home4/gregre/public_html/example.com/insert_announcements.php</b> on line <b>9</b><br />

Announcement INSERT execute() failed: Column 'message' cannot be null

But I am sending the content of what is sent over to my file and the message is sending through? Just the user_id is showing blank.

Answer 1

有一些错误：

1. $user = $("#approved_id").val();
2. "user_message": user_message

Answer 2

data: {
   "user_id": $user,
   "user_message": user_message
 },

Change to user_message

Answer 3

With: $user = this.value;

you are trying to get the value of the clicked element (the submit button).

It should be: $user = $("#approved_id").val();

Also check the name of the message variable, either rename it 'user_message' on the js/client side:

"user_message": user_message

or 'message' on the php/server side.

$announcement_message= $_POST['message'];

Answer 4

This is the issue I am seeing:

In your AJAX call you are sending these parameters:

data: {
  "user_id": $user,
  "message": user_message
},

Where $user is defined like this: $user = this.value; which means the value comes from the the function it resides in which is the click event on "#submit_announcement" like this:

$("#submit_announcement").on("click", function () {
    //..code
    $user = this.value;
    //..code
});

Doing it this way you are assigning the value of the element #submit_announcement to $user however if we look at the HTML, we see that #submit_announcement is just a simple button with no value:

<button type="button" class="contactButton" id="submit_announcement">Add Announcement</button>

What it seems you are trying to do is get values submitted by the form. To do that you need to use the event handler .submit() rather then .click() since you are submitting a form . The submit() event should be attached to the form element like this:

$("#insert_announcements").submit(function () {
    //..code
});

Also make sure you change your button element's type attribute to submit like this:

<button type="submit" class="contactButton" id="submit_announcement">Add Announcement</button>

Once you do that, now you can use .serialize() to encode your form elements and values to a string form that can be sent in your POST request like this:

$("#insert_announcements").submit(function () {
    var form_elems = $(this).serialize();
});

Now that you have all that, you can send it through ajax, thus

FINAL RESULT:

$("#insert_announcements").submit(function () {
    var form_elems = $(this).serialize();
    $.ajax({ 
         url: "insert_announcements.php", 
         type: "POST",
         data: form_elems,
         success: function (data) {
             //your result code
         }
    });
    return false;
});