Question

我想知道按钮提交如何与AJAX交互以将SELECT FROM数据作为MySQL查询进行交互，而无需刷新页面。我已经有一个与AJAX交互的文本框，以便当用户输入文本并按下输入但不知道如何使按钮执行时页面不刷新我的代码下面显示了如何使文本框插入数据而不用清爽

这是我的文本框脚本

    <div id="container">
    About me<input type="text" id="name" placeholder="Type here and press Enter">
</div>

<div id="result"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $('#name').focus();
        $('#name').keypress(function(event) {
            var key = (event.keyCode ? event.keyCode : event.which);
            if (key == 13) {
                var info = $('#name').val();
                $.ajax({
                    method: "POST",
                    url: "about_me_action.php",
                    data: {name: info},
                    success: function(status) {
                        $('#result').append(status);
                        $('#name').val('');
                    }
                });
            };
        });
    });
</script>

这是行动

<?php 

if (isset($_POST['name'])) {
echo '<h1>'.$_POST['name'];

include('..\db.php');
$con = mysqli_connect($dbsrvname, $dbusername, $dbpassword, $dbname);

$name = $_POST['name'];
$name= mysqli_real_escape_string($con, $name);



$q = mysqli_query($con,"SELECT * FROM tbl1 WHERE username = '".$_COOKIE[$cookie_name]."'");


   while($row = mysqli_fetch_assoc($q)){
       //echo $row['id'];
       $id = $row['id'];
   }

$result=$con ->query=("REPLACE INTO about_user (about_me,number) VALUES ('".$name."','".$id."')");

$insert = $con->query($result);

echo "About Me Updated";
}

?>

现在我需要做的就是让下面的按钮示例执行类似的操作而不是INSERTING只是SELECT，如何更改上面的脚本以允许按钮处理动作？

<form 

action="action_mail_view.php"   method="post">

<input type="submit" class="button" name='msubmit'  value="View Mail"/> 

</form>

Answer 1

function callServer() {
  $('#mail-button').on('click', function() {
    var info = $('#name').val();
    $.ajax({
      method: "POST",
      url: "about_me_action.php",
      data: {
        name: info
      },
      success: function(status) {
        $('#result').append(status);
        $('#name').val('');
      }
    });
  });

}

$(document).ready(function() {
  $('#name').focus();
  $('#name').keypress(function(event) {
    var key = (event.keyCode ? event.keyCode : event.which);
    if (key == 13) {
      $('#mail-button').trigger('click');
    };
  });
});

<form action="action_mail_view.php" method="post">

  <input type="submit" class="button" id="mail-button" name='msubmit' value="View Mail" />

</form>

Answer 2

您还没有向我们展示您是如何尝试使按钮工作的，那么我们如何才能向您提供反馈？基本上，您需要使用action_mail_view.php方法

调用GET的类似ajax调用

<强>的Ajax

$.ajax({
    method: "GET",
    url: "action_mail_view.php",
    data: {},
    success: function(results) {
        var userinfo = JSON.parse(results);
        //Todo: do what you want with the user's info
    }
});

在PHP方面，您首先应该对用户进行身份验证（此处未显示），然后从数据库中SELECT她的信息并将其返回

<强> action_mail_view.php

//Todo: authenticate

//this works with your setup, but it's a bad idea to trust
//a cookie value or anything else coming from the
//browser without verification
$username= mysqli_real_escape_string($con, $_COOKIE[$cookie_name]);

//get the user's info from your DB. By using a JOIN, we can execute
//just one query instead of two.
$sql = "SELECT t2.* FROM tbl1 as t1 "
        ."LEFT JOIN about_user as t2 "
        ."ON t1.id = t2.number"
        ."WHERE t1.username = $username";

//Todo: execute query. see what results you get and refine
//      the SELECT clause to get just what you want

if($q = mysqli_query($con,$sql)):
    $userinfo = mysqli_fetch_assoc($q);

    //tell the browser to expect JSON, and return result
    header('Content-Type: application/json');
    echo json_encode($userinfo);
else:
    //Todo: error handling
endif;

Ajax Button无需刷新即可获取数据？

2 个答案: