使用jQuery AJAX请求-POST到php

Question

I am creating a cross-platform application using HTML, CSS, and jQuery/JavaScript. I am using AJAX requests to get data from a database, as well as posting data to a database. I have gotten the AJAX 'GET' request method to work. This is my 'GET' method (this is in a script I have on one of my HTML pages).

GET method

var outputHeader = $('#outputHeader');
var outputDes = $('#outputDes');
$.ajax({
    url: '/currentEvent.php',
    type: 'GET',
    //data: 'json',
    datatype: 'jsonp',
    jsonp: 'jsoncallback',
    timeout: 5000,
    success: function (data) {
        outputHeader.html("");
        outputDes.html("");
        for (var i in data) {
            outputHeader.append("<h2>" + data[i].Event_Name + "</h2>" + "<p>" + data[i].Event_Date + "</p>" + "<p>" + data[i].Event_Time + "</p>" + "<p>" + data[i].Event_Venue + "</p>" + "<p>" + "Organised by &nbsp" + data[i].Event_Organiser + "</p>");
            outputDes.append("<center>" + "<img src='" + data[i].Event_Image + "'/>" + "</center>" + "<p>" + data[i].Event_Description + "</p>")
        }
    },
    error: function () {
        outputHeader.html('<p>There was an error loading the data.</p>');
        outputDes.html('<p>There was an error loading the data.</p>');
    },
});

It is the 'POST' method that is troubling me. This is the code I have for the 'POST' method (this is in a script I have in one of my HTML pages).

POST method

var urlID = 1;
$.ajax({
    url: '/currentEvent.php',
    type: 'POST',
    data: 'urlID=' + urlID,
    datatype: 'text',
    success: function (data) {
        console.log(data);
    },
});

The AJAX request is posting to this .php page.

currentEvent.php page

        $eid = $_POST['urlID']];
        $query = "SELECT * FROM Event WHERE Event_ID = {$eid}";
        $getData = sqlsrv_query( $conn, $query );
        if ($getData === false) {
            die(print_r(sqlsrv_errors(), true));
        }           
        $records = array();

            while($row = sqlsrv_fetch_array($getData, SQLSRV_FETCH_ASSOC)) 
            {
                $records[] = $row;
            }
        //echo json_encode($getData);
        echo json_encode($records);

When I run the HTML page (I am using a server), it doesn't set "$eid" as 1. I have the 'POST' method before the 'GET', because I have to post the id to the php page so that it can run the query and return the data back to the application. The result is an array of variables in the 'GET' method being undefined. I would post a picture, but I cannot because I am new.

I have tried the solutions that were suggested by other users, but it didn't work. I am a bit of a newbie when it comes to developing in jQuery and JavaScript, so it is taking me a while to understand it. Is there anything I am doing wrong?

Answer 1

From what I know, in post you need to set the request header of "content-type" to "multipart/form-data". You would do this like so:

$.ajax({
         url: "/currentEvent.php",
         type: "POST",
         data: 'urlID=' + urlID,
         datatype: 'text',
         beforeSend: function(xhr) {
             xhr.setRequestHeader('content-type', 'multipart/form-data');
         },
         success: function (data) {
             console.log(data);
         },
      });

Hope this helps,

Awesomeness01