如何检查成功的数据在PHP文件中使用MySQL提交

Question

I'm submitting a form using MySQL command inside a PHP file. I'm able to insert the data without any problem.

However, I also, at the same time, want to display the user a "Thank you message" on the same page so that he/she knows that the data has been successfully registered. On the other hand I could also display a sorry message in case of any error.

Therein lies my problem. I've written some lines in Javascript to display the message in the same page. However, I'm stuck on what (and how) should I check for success and failure.

I'm attaching my code below.

Can you please help me on this with your ideas?

Thanks AB

HTML Form tag:

<form id="info-form" method="POST" action="form-submit.php">

form-submit.php:

<?php   
    require("database-connect.php");

    $name = $_POST['name'];
    $email = $_POST['email'];
    $mobile = $_POST['mobile'];

    $sql = "INSERT INTO tbl_details ".
           "(name,email_id,mobile_number) ".
           "VALUES ".
           "('$name','$email','$mobile')";

    mysql_select_db('db_info');     
    $retval = mysql_query( $sql, $conn );

    if(! $retval )
    {
        die('Could not enter data: ' . mysql_error());
        return false;
    }

    echo "Entered data successfully
";
    mysql_close($conn);
?>

submit-logic.js:

$(function () 
{
    $('form').submit(function (e) 
    {                   
        e.preventDefault();

        if(e.target === document.getElementById("info-form"))
        {
            $.ajax(
            {
                type:this.method,
                url:this.action,
                data: $('#info-form').serialize(),
                dataType: 'json',    
                success: function(response)
                {
                    console.log(response);                          
                    if(response.result == 'true') 
                    {
                        document.getElementById("thankyou_info").style.display = "inline";
                        $('#please_wait_info').hide();
                        document.getElementById("info-form").reset();
                    }                       
                    else 
                    {           
                        document.getElementById("thankyou_info").style.display = "none";
                        document.getElementById("sorry_info").style.display = "inline";
                        $('#please_wait_info').hide();  
                    }
                }
            }
        )}; 
    });
}

Answer 1

Per documentation: http://api.jquery.com/jquery.ajax/

dataType (default: Intelligent Guess (xml, json, script, or html))
Type: String
The type of data that you're expecting back from the server.

You are explicitly setting this to json but then returning a string. You should be returning json like you are telling the ajax script to expect.

<?php   
    require("database-connect.php");

    $name = mysql_real_escape_string($_POST['name']);
    $email = mysql_real_escape_string($_POST['email']);
    $mobile = mysql_real_escape_string($_POST['mobile']);

    $sql = "INSERT INTO tbl_details ".
           "(name,email_id,mobile_number) ".
           "VALUES ".
           "('$name','$email','$mobile')";

    mysql_select_db('db_info');     
    $retval = mysql_query( $sql, $conn );

    if(! $retval )
    {
        die(json_encode(array('result' => false, 'message' => 'Could not enter data: ' . mysql_error()));
    }

    echo json_encode(array('result' => true, 'message' => 'Entered data successfully'));
    mysql_close($conn);
?>

I also added code to sanitize your strings, although mysql_* is deprecated and it would be better to upgrade to mysqli or PDO. Without sanitization, users can hack your database..

Nevertheless, returning json properly will ensure that your response in success: function(response) is an object, and response.result will be returned as expected, and you can use response.message to display the message where you want.