How to Insert Data into a MySQL Database using PHP and AJAX (jQuery)?

Insert Data into MySQL Database using PHP and AJAX (jQuery)

Problem:

You want to insert user-entered data from a simple form into a MySQL database using PHP and AJAX (jQuery). Existing tutorials have proven confusing, making it difficult to implement your desired functionality.

Solution:

Utilizing jQuery's powerful AJAX capabilities and PHP's database connectivity, you can accomplish this task with relative ease.

HTML Form:

<code class="html"><form method="post" action="process.php" onSubmit="return ajaxSubmit(this);">
    <label for="my_value">Value:</label>
    <input type="text" name="my_value" id="my_value">
    <input type="submit" name="form_submit" value="Go">
</form></code>

jQuery Function:

<code class="javascript">var ajaxSubmit = function(formEl) {
    var url = $(formEl).attr('action');
    var data = $(formEl).serializeArray();

    $.ajax({
        url: url,
        data: data,
        dataType: 'json',
        success: function(rsp) {
            if (rsp.success) {
                alert('Form data submitted successfully');
            }
        }
    });

    return false;
};</code>

process.php Script:

<code class="php"><?php
function post($key) {
    return isset($_POST[$key]) ? $_POST[$key] : false;
}

$cxn = mysql_connect('localhost', 'username', 'password');
if (!$cxn) exit;
mysql_select_db('database_name', $cxn);

$val = mysql_real_escape_string(post('my_value'), $cxn);

$sql = sprintf("INSERT INTO table_name (column_name) VALUES ('%s')", $val);
$result = mysql_query($sql, $cxn);

$resp = new stdClass();
$resp->success = false;
if ($result) {
    $resp->success = true;
}

echo json_encode($resp);
?></code>

In this solution, the user enters data into the form and clicks the submit button. The jQuery function captures the data and sends an AJAX request to process.php. The process.php script handles the database connection, data validation, and the insertion query. The response is sent back to the client as a JSON object, informing the user of the success or failure of the insert operation.

The above is the detailed content of How to Insert Data into a MySQL Database using PHP and AJAX (jQuery)?. For more information, please follow other related articles on the PHP Chinese website!