Question

我是Ajax和Jquery的新手。在学习了基本概念之后，我尝试创建一个PHP应用程序，其中可以使用Ajax，PHP和Jquery单击按钮来插入值并显示在其下方。但事情无法平息，我最终制作了4个文件，即insert_frontend，insert_backend，select_frontend，select_backend。

我希望将插入和选择代码放在一个后端文件中，同样只需要1个前端。

代码如下：

insert_frontend.php：

<script src="ajax.js"></script>
<script>
$(document).ready(function(){ 
    $('#insert').click(function(event){
            event.preventDefault();
            $.ajax({
            url:"insert_backend.php",
            method:"post",
            data:$('form').serialize(),
            dataType:"html",
            success:function(strMsg){
                $('#Imsg').html(strMsg);
            }   

    })  
})


})
</script>
<body>
<div id="Imsg"></div>
<div id="Smsg"></div>
<form method="post" action="#">
<table>
<tr><th>Name</th><td><input type="text" name="name" id="name"></td></tr>
<tr><th>Address</th><td><input type="text" name="address" id="address"></td></tr>
<tr><th>Contact</th><td><input type="text" name="contact" id="contact"></td></tr>
<tr><td><input type="submit" name="Insert" id="insert" value="insert"></td></tr>
</tr>
</table>
</form>
<input type="submit" name="select" id="select" value="select">
</body>

insert_backend.php：

<body>
<?php

/*insert start*/
$name=$_POST['name'];
$address=$_POST['address'];
$contact=$_POST['contact'];

$con=mysqli_connect("localhost","root","","testajax");
$data=mysqli_query($con,"insert into student values(null,'$name','$address','$contact')");
if($data==true)
{
    echo "value inserted";  
}
else
{
    echo "insert error";    
}
/*insert end*/

?>
</body>

select_frontend.php：

<script src="ajax.js"></script>
<script>
$(document).ready(function(){
$('#select').click(function(event){
        event.preventDefault();
        $.ajax({
        url:"select_backend.php",
        dataType:"html",
        success:function(strMsg){
            $('#Smsg').html(strMsg);    
        }                   
    })
})
})
</script>
</head>

<body>
<input type="submit" name="select" id="select" value="Select">
<div id="Smsg"></div>
</body>

select_backend.php：

<body>
<?php
$con=mysqli_connect("localhost","root","","testajax");
$data1=mysqli_query($con,"select * from student");
$col=mysqli_num_fields($data1);
echo '<table>';
while($row=mysqli_fetch_array($data1))
{
    echo '<tr>';
    for($i=0;$i<$col;$i++)
    {
        echo '<td>'.$row[$i].'</td>';   
    }
    echo '</tr>';

}
echo '</table>';
?>
</body>

无论是向我投降，请告诉我投票的原因，以便我能够改进。

Answer 1

尝试以下脚本：

我希望它能奏效。

        $(document).ready(function(){ 
    $('#insert').click(function(event){
            event.preventDefault();
            $.ajax({
            url:"insert_backend.php",
            method:"post",
            data:$('form').serialize(),
            dataType:"html",
            success:function(strMsg){
                $.ajax({
                url:"select_backend.php",
                dataType:"html",
                success:function(strMsg){
                    $('#Smsg').html(strMsg);    
                }                   
            });
                $('#Imsg').html(strMsg);
            }   
            });  
    });
});

Answer 2

正如我在评论中提到的，我建议从html中删除javascript并将html拆分为模板和单独的视图。更多文件而不是更少，但更容易维护。

这也适用于控制器选择和插入信息。

但是，如果要将这些放在一起，可以利用所使用的不同http方法：

if ($_SERVER["REQUEST_METHOD"] === 'POST') {
    // a POST request was made, execute your insert 
else {
    // a GET request was made, execute your select
}

您甚至可以添加更多方法，例如DELETE，将该操作放在同一个控制器中。

在使用AJAX时，如何在同一个PHP文件中放置select和insert代码？

无论是向我投降，请告诉我投票的原因，以便我能够改进。

2 个答案: