我如何将AJAX响应结果返回主页面

Question

I have a user registration form in a jQuery modal dialog.

After completing the form and clicking on the button of the modal dialog, the data should go to mysql. That part is ok for me. I am using Jquery/Ajax to send the data to the database.

My problem is that I need to get back the processed data to my main page, user.php (where the modal dialog is opened). There is a table that displays all registered users and I wish to update that HTML table to show a successful registration.

This is my Jquery/Ajax -

    if ( bValid) { 

        jQuery.ajax({
            type: "POST", // HTTP method POST or GET
            url: "process.php", //Where to make Ajax calls
            //dataType:"text", // Data type, HTML, json etc.
            dataType: 'json',
            data: { 
                name: $('#name').val(), 
                address: $('#address').val(), 
                city: $('#city').val() 
            },
            success:function(data){
                alert(data);
            },
            error:function (xhr, ajaxOptions, thrownError){
                //On error, we alert user
                alert(thrownError);
            }
        });
        $(this).dialog("close");                    
    } 

This is PHP code from process.php page

<?php
//include db configuration file
include_once("../test.php");

if ( (isset($_POST["name"]) && strlen($_POST["name"]) >= 3 && strlen($_POST["name"]) <= 60) &&
    (isset($_POST["address"]) && strlen($_POST["address"]) >= 3 && strlen($_POST["address"]) <= 50) &&
    (isset($_POST["city"]) && strlen($_POST["city"]) >= 3 && strlen($_POST["city"]) <= 40) ) 
{   //check $_POST["name"] and $_POST["address"] and $_POST["city"] are not empty

    $name   = $_POST["name"];
    $address = $_POST["address"];
    $city   = $_POST["city"];

    $q = "INSERT INTO users ( name, address, city) VALUES 
            ('".$name."','".$address."','".$city."')";
    $r = mysqli_query($dbc, $q); 

    if ( mysqli_effected_rows($dbc) == 1 ) {
        // make the table row 
        $output  = "<tr>
";
        $output .= "  <td><input type='checkbox' name='' value='' class='' />&nbsp;&nbsp;$name</td>
";
        $output .= "  <td>$address</td>
";
        $output .= "  <td>$city</td>
";
        $output .= "  <td><span class='edit_ico'></span></td>
";
        $output .= "  <td><span class='delete_ico'></span></td>
";
        $output .= "</tr>
";   

        echo $output;

    } else {
        echo 'query error';
    }
} else {
    echo "error in post array";
}

?>

This is my table structure from user.php (main page)

<table>
  <tr>
    <th><input type='checkbox' class='selectAll' name='selectAll' value='' /> Name</th>
    <th>Address</th>
    <th>City</th>
    <th>Edit</th>
    <th>Delete</th>
  </tr>
<tr>
  <td><input type='checkbox' name='' value='' class='' />&nbsp;&nbsp;sfdsfsdf</td>
  <td>fdsafasf</td>
  <td>dsfadasf</td>
  <td><span class='edit_ico'></span></td>
  <td><span class='delete_ico'></span></td>
</tr>
<tr>
  <td><input type='checkbox' name='' value='' class='' />&nbsp;&nbsp;Tharanga Nuwan</td>
  <td>Alagala</td>
  <td>Ginigathena</td>
  <td><span class='edit_ico'></span></td>
  <td><span class='delete_ico'></span></td>
</tr>
</table>

Can anybody tell how can I update my HTML table?

Thank you.

Answer 1

I see that process.php is outputting a table row. You will receive that row inside the success function of the AJAX routine.

All you need to do is have a DIV in your document where you will put it.

For example, I suggest removing the <tr> and </tr> tags from your output, and adding a DIV to the table row you want to update, placing the current information inside that DIV:

<tr>
  <div id="yogibear">
    <td><input type='checkbox' name='' value='' class='' />sfdsfsdf</td>
    <td>fdsafasf</td>
    <td>dsfadasf</td>
    <td><span class='edit_ico'></span></td>
    <td><span class='delete_ico'></span></td>
  </div><!--#yogibear-->
</tr>

IN YOUR AJAX:

    jQuery.ajax({
        type: "POST", // HTTP method POST or GET
        url: "process.php", //Where to make Ajax calls
        //dataType:"text", // Data type, HTML, json etc.
        dataType: 'json',
        data: { 
            name: $('#name').val(), 
            address: $('#address').val(), 
            city: $('#city').val() 
        },
        success:function(data){
            $('#yogibear').html(data);
        }
    });