javascript - 使用json将记录插入mysql

Question

我想使用json将记录插入到mysql中，系统可以在不刷新页面的情况下显示新记录。

我的代码如下所示:

第 1 部分，脚本从表单获取两个值并将其转换为 json，并将它们传递给 action.php

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
    $(function() {
        $(".submit_button").click(function() {
            var textcontent = $("#content").val();
            var name = $("#name").val();
            var dataString = {'content': textcontent, 'name': name}; 
            if (textcontent == '') {
                alert("Enter some text..");
                $("#content").focus();
            }
            else
            {
                $("#flash").show();
                $("#flash").fadeIn(400).html('<span class="load">Loading..</span>');
                $.ajax({
                    type: "POST",
                    url: "action.php",
                    data: dataString,
                    dataType: 'json', 
                    cache: true,
                    success: function(html){

                        $("#show").html(html);
                        $("#flash").hide();
                        $("#content").focus();
                    }  
                });
            }
            return false;
        });
    });
</script>
<div>

<?php
$conn=mysqli_connect('localhost','Practical4','1234') or die('Not connected');

$database=mysqli_select_db($conn,'Practical4') or die('Database Not connected');

$id=$_GET['id'];

$query = "select * from hotel where name='$id'";
$data=mysqli_query($conn,$query);
while($rows=mysqli_fetch_array($data)){

    $name=$rows['name'];
    $price=$rows['price'];
    $duetime=$rows['dueTime'];
    $address=$rows['location'];
}
?>
<form method="post" name="form" action="">
<h3>Add Comment for <?php echo $name;?><h3>
<textarea cols="30" rows="2" name="content" id="content" maxlength="145" >

</textarea><br />
<input type="text" name="name" id="name" value="<?php echo $name;?>" hidden > <br>

<input type="submit" value="Add Comment" name="submit" class="submit_button"/>

</form>
</div> 

<?php
$host="localhost"; 
$username="Practical4"; 
$password="1234"; 
$db_name="Practical4"; 
$con=mysql_connect("$host", "$username", "$password")or die("cannot connect"); 
mysql_select_db("$db_name")or die("cannot select DB");
$sql = "select * from comment where name='$name'"; 
$result = mysql_query($sql);
$json = array();
if(mysql_num_rows($result)){
while($row=mysql_fetch_row($result)){
   $json[] = $row[1];
    }
}
mysql_close($con);
echo implode('<br />', $json);

?> 

<div class="space" ></div>
<div id="flash"></div>
<div id="show" ></div>

第二部分，action.php，将记录插入mysql数据库。

<?php

$DBServer = 'localhost'; // e.g 'localhost' or '192.168.1.100'
$DBUser   = 'Practical4';
$DBPass   = '1234';
$DBName   = 'Practical4';

$conn = new mysqli($DBServer, $DBUser, $DBPass, $DBName);

// check connection
if ($conn->connect_error) {
  trigger_error('Database connection failed: '  . $conn->connect_error, E_USER_ERROR);
}

$v1="'" . $conn->real_escape_string($_POST['content']) . "'";
$v2="'" . $conn->real_escape_string($_POST['name']) . "'";

$sql="INSERT INTO comment (content,name) VALUES ($v1,$v2)";

if($conn->query($sql) === false) {
  trigger_error('Wrong SQL: ' . $sql . ' Error: ' . $conn->error, E_USER_ERROR);
} else {
  $last_inserted_id = $conn->insert_id;
  $affected_rows = $conn->affected_rows;
  echo '<div class="showbox">'.$v1.'</div>';
}

?>

到目前为止，代码可以插入新数据，但如果不刷新页面，则不会动态显示新记录。有办法解决这个问题吗？

Answer 1

将您的dataType更改为html，因为此参数告诉服务器它将接受什么样的响应:

$.ajax({
  type: "POST",
  url: "action.php",
  data: dataString,
  dataType: 'html', 
  cache: true,
  success: function(data){
    $("#show").html(data);
    $("#flash").hide();
    $("#content").focus();
  }  
});

在上述情况下，返回值应该是纯 html:

print '<div class="showbox">' . $v1 . '</div>';

然后您可以使用以下方法将其添加到您的页面:

$('#show').html(data);

如果您仍然想使用 json，您可以使用如下方式对您的响应进行编码:

print json_encode(array('html' => '<div class="showbox">' . $v1 . '</div>'));

然后你需要解析这个值:

$("#show").html(data.html);

在上面的示例中，将 success 函数参数命名为 data 之类的名称似乎更清晰，因为它不会只包含 html。