Question

我是jquery和ajax的新手，我正在努力解决这个问题。我正在使用jquery mobile 1.4.1，我正在尝试显示已保存到数据库的表单数据，而无需从弹出窗口刷新页面。

我有一个页面，我点击一个按钮打开一个弹出窗口。用户可以在弹出窗口中输入信息，当点击提交时，表单数据通过ajax传递给我的php脚本来更新数据库;这很有效。

这是弹出窗体：

    $(document).ready(function()
    {
        $('#submit').click(function()
        {
            $.post("submitNewCustId.php", $("#addId").serialize(),  function(response) 
            {
                $('#success').html(response);
            });
            return false;
        });
    });
</script>

<div data-role='popup' id='addCustId' data-theme='a' data-overlay-theme='a' data-dismissible='false' style='min-width:300px;'>
<div data-role='header' data-theme='a'>
    <h1>Add Identification Type</h1>
</div>
<div data-role='main' class='ui-content'>
    <form id='addId' action ='newcustomerid.php' method='post' >
        <input type="hidden" name="cust_id" value='<?php echo $custid; ?>'>
        <input type="hidden" name="sess_id" value='<?php echo $sid; ?>' />
        <input type="hidden" name="submitted" value="true"/>
            <div class="ui-field-contain">
                <label for="phoneType">Type</label>
                    <select name="idType" id="idType" data-native-menu="false">
                        <?php echo $idInnerOptions; ?>
                    </select>
            </div>
            <div class="ui-field-contain">
                <label for="phoneNumber">Description</label>
                <input type="text" name="idDesc" id="idDesc" value="">
            </div> 
            <div class='ui-grid-a'>
                <div class='ui-block-a'><input type='submit' id="submit" value='Update' class='ui-btn ui-btn-inline' data-transition='pop' /></div>
                <div class='ui-block-b'><a href='#' class='ui-btn' data-rel='back' data-transition='pop'>Cancel</a></div>
                <div id="success" style="color:black;"></div>
            </div>
     </form>

</div>

这是PHP（我知道它非常基础，我将在稍后处理验证等）：

$idType = $_POST['idType'];
$idDesc = $_POST['idDesc'];
$custId = $_POST['cust_id'];
$sessId = $_POST['sess_id'];

$sql = "call theFunction ('". $idType ."','". $custId ."','". $idDesc ."','". $sessId ."')";
$insert = sasql_query($connect, "$sql");

但是，在我的数据库更新后，我希望关闭弹出窗口，并使用已保存在数据库中的新数据更新初始页面。以下是需要更新的代码：

    while($row = sasql_fetch_array($idresult))
    {
        echo " 
        <li>
            <div class='container_12'>
                    <div class='grid_15'>
                <div class='ui-grid-a'>
                    <div class='ui-block-a'><div id='idType' class='ui-bar ui-bar-a' style='height:15px; background-color:transparent; border: none; color: #000000; font-weight: normal;'>" . $row['description'] . "</div></div>
            <div class='ui-block-b'><div id='idNo' class='ui-bar ui-bar-a' style='height:15px; background-color:transparent; border: none; color: #000000; font-weight: normal;'>" . $row['number'] . "</div>
        </div>
            </div>
        </div>
        <div class='grid_120'>
    <a href='#editCustId' data-rel='popup' data-position-to='window' data-transition='pop' style='padding:0px; margin:0px; border:0px; float: right;' class='ui-btn ui-btn-inline ui-icon-edit ui-btn-icon-notext'>Edit</a> 
            </div>
        </div>
    </li> 
    ";
        }   //end while
        echo "</ul>";

我不知道怎么做 - 我的问题是1.如何在按下提交时关闭弹出窗口2.如何更新php while循环以显示没有页面刷新的新行？我希望这一切都有意义，谢谢你的帮助。

Answer 1

最好的方法是同时使用$_SESSION和ajax。这是我对它的抨击：

jQuery的：

$(document).ready(function(){
    $('form#addId').sumbit(function(){
        $.ajax({
            type:'POST',
            url:'yourPHP.php',
            data:{idType:$('select[name="idType"]').val(),idDesc:$('input[name="idDesc"]').val()},
            beforeSend:function(xhr){
                //validation here.
                if($('input[type="text"]','form#addId').val().length<3)xhr.abort();//this will prevent the ajax from sending the POST to your php page. IF the values of the text inputs are less than 3.
            },
            success:function(result){
                console.log(result);//shows the result in the console.
                var rowBuilder=result.split(';');
                var rows=new Array();
                rowBuilder.foreach(function(){
                    var temp=this.split(':');
                    rows[temp[0]]=temp[1];
                });
                //hopefully rows is now: rows{'idType'=>'value');
            }
        });
        return false;
    });
});

使用您的PHP我建议使用类结构并使用mySQLi

while($row=sasql_fetch_array($idresult){
    echo'rowDescription:'.$row['description'].';rowNumber:'.$row['number'].';';
}

还可以cust_id和sess_id $_SESSION这样：

$_SESSION['cust_id']=$cust_id;//this will mean you can use the variable on any PHP page within your website once it's been set.
//will require session_start(); on ever line 1 on your page. It HAS to be line 1.

现在可以在弹出窗口之前将数组行放入上一个字段。希望这有帮助。如果您有任何问题，请告诉我

Jquery ajax无需刷新即可显示数据库数据

1 个答案: