Question

我开始学习AJAX，截至目前我已经知道如何使用ajax插入数据..我想学习如何在插入后显示数据而不刷新页面。

这是我的表单代码：

<form>
<select class="input" id="Factory_Name" name="factory">
<option value='---' selected>---</option>

<?php
    $qry = $handler->prepare( "SELECT * FROM factory_list WHERE flist_compid = ?");
    $qry->execute(array($id));

    while($row = $qry->fetch(PDO::FETCH_ASSOC)){
            $f_id = $row['flist_id'];
            $f_name = $row['flist_name'];
            echo "<option value=$f_name >$f_name</option>";
    }
?>

</select>
<input type="button" id="save_hidden" value="Save New Factory" style="visibility:hidden;"/>
</form>

这是ajax脚本：

<script>
    $('input#save_hidden').on('click', function(){
        var factory = $('input#Name_of_Factory').val();
        var factory_address = $('input#Factory_address').val();
        var factory_country = $('#country option:selected').val();
        var factory_city = $('input#city').val();
        var factory_cperson = $('input#contact_person').val();
        var factory_cnumber = $('input#contact_number').val();
        var factory_email = $('input#email').val();

             //ajax call
                    $.ajax({
                        url     :   'php/savefactory.php',
                        type    :   'POST',
                        async   :   false,
                        data    :   {
                                        buttonsave:1,
                                        factoryname : factory,
                                        address     : factory_address,
                                        country     : factory_country,
                                        city        : factory_city,
                                        contact     : factory_cperson,
                                        number      : factory_cnumber,
                                        email       : factory_email
                                        },
                        success: function(result){
                                        alert(result);                                  
                                    }
    });
       // clear fields after inserting
        $('input#Name_of_Factory').val('');
        $('input#Factory_address').val('');
        $('#country').val('---');
        $('input#city').val('');
        $('input#contact_person').val('');
        $('input#contact_number').val('');
        $('input#email').val('');
    });
    </script>

这是我的savefactory.php文件

<?php
session_start();


if (isset($_SESSION['email'])){
$data = $_SESSION['email'];
include('config.php');
$qry = $handler->prepare( "SELECT id FROM login WHERE email = ?");
$qry->execute(array($data));

while($row = $qry->fetch(PDO::FETCH_ASSOC)){
  $id = $row['id'];
}

if(!empty($_POST['factoryname']) && !empty($_POST['address']) && !empty($_POST['country']) && !empty($_POST['city']) && !empty($_POST['contact']) && !empty($_POST['number']) && !empty($_POST['email'])){
        $factory = $_POST['factoryname'];
        $factoryadd = $_POST['address'];
        $country = $_POST['country'];
        $city = $_POST['city'];
        $contact = $_POST['contact'];
        $contact_number = $_POST['number'];
        $emailadd = $_POST['email'];
        //execute sql query
        $qry = 'INSERT INTO factory_list (flist_compid, flist_name, flist_address, flist_country, flist_city, flist_contact, flist_cnum, flist_email) VALUES (?,?,?,?,?,?,?,?)';
        $qry = $handler->prepare($qry);
        $qry->EXECUTE(array($id,$factory,$factoryadd,$country,$city,$contact,$contact_number,$emailadd));



            if($qry){
                echo "New Factory Details has been Saved!";
            }else{
                echo "Error Saving the New Factory";
            }
}else{

    echo"Please fill in all fields for factory details";
}

}
?>

非常感谢你！

Answer 1

如何在插入后显示数据而不刷新页面

您的#save_hidden按钮应以默认方式提交表单。您应该使用preventDefault()使用AJAX提交表单，而无需刷新页面：

$('input#save_hidden').on('click', function(event){
    event.preventDefault();
    // ...
    $.ajax({
        // ...
    });
});

要将新创建的记录附加到select元素，请使用AJAX success回调来确定记录是否已成功存储在DB中：

    $.ajax({
        // ...
        success : function(result){
            // check whether the record has been successfuly stored in DB:
            if(result == 'New Factory Details has been Saved!'){
                // append option to #Factory_Name select:
                var new_factory = $('#Name_of_Factory').val();
                $('#Factory_Name').append('<option value="'+new_factory+ '">'+new_factory+'</option>');
                // clear form fields after inserting:
                $('#my-form').find('input').val('');
            }
        }
    });

注意即可。请勿在{{1}}回调之前清除表单字段。

顺便说一句。 jQuery中有serialize()方法可用，因此无需单独提取每个表单元素值。将success属性添加到id="my-form"，然后使用：

<form>

Answer 2

正如philip1000所说的那样，在发布页面中的ajax数据之前，你需要启动默认方法来阻止默认方法。

$('input#save_hidden').on('click', function(event){
        event.preventDefault();

我不确定您对如何显示数据的确切想法。但是，当成功函数触发时，您只需将ajax发送的信息附加到DOM即可。

以下是在表格中显示信息的示例。

首先，您可以在表单下创建一个表格，默认情况下会隐藏该表格。

<html>
   <table id="complete-table">
        <tr>
            <th>factory name</th>
            <th>address</th>
            <th>country</th>
            <th>city</th>
            <th>contact</th>
            <th>number</th>
            <th>email</th>
       </tr>

    </table>

</html>

然后，当您成功将ajax挂钩发送到成功返回功能时，请显示表单并将数据附加到其中。

 success: function(result){

          var tableRow = '<tr>';

          tableRow += '<td>'+factory+'</td><td>'+factory_address+'</td><td>'+factory_country+'</td><td>'+factory_city+'</td><td>'+factory_cperson+'</td><td>'+factory_cnumber+'</td><td>'+factory_email+'</td>';

          tableRow += '</tr>'

          $('#complete-table').append(tableRow);

          $('#complete-table').show();
 }

希望能帮到你。

由于

插入记录后显示<select>选项而不刷新页面</select>

2 个答案: