Question

我在jQuery模式对话框中有一个用户注册表单。

完成表单并单击模态对话框的按钮后，数据应转到mysql。那部分对我来说没问题。我正在使用Jquery / Ajax将数据发送到数据库。

我的问题是我需要将已处理的数据恢复到我的主页user.php（打开模态对话框的位置）。有一个表格显示所有注册用户，我希望更新该HTML表格以显示注册成功。

这是我的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");                    
    }

这是来自process.php页面的PHP代码

<?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>\n";
        $output .= "  <td><input type='checkbox' name='' value='' class='' />&nbsp;&nbsp;$name</td>\n";
        $output .= "  <td>$address</td>\n";
        $output .= "  <td>$city</td>\n";
        $output .= "  <td><span class='edit_ico'></span></td>\n";
        $output .= "  <td><span class='delete_ico'></span></td>\n";
        $output .= "</tr>\n";   

        echo $output;

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

?>

这是我在user.php（主页）

中的表格结构

<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>

有人可以告诉我如何更新我的HTML表格吗？

谢谢。

Answer 1

我看到process.php正在输出表格行。您将在AJAX例程的成功函数中收到该行。

您需要做的就是在文档中放置一个DIV。

例如，我建议从输出中删除<tr>和</tr>标记，并将DIV添加到要更新的表格行，将当前信息放在该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>

在你的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);
        }
    });

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

1 个答案: