0

我在 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 表格？

谢谢你。

4

1 回答 1

0

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

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

例如，我建议从您的输出中删除<tr>and</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);
        }
    });
于 2013-06-18T18:40:02.093 回答