Ajax 按钮无需刷新即可获取数据

Ajax Button to fetch data without refresh?

本文关键字：获取 数据 刷新 按钮 Ajax      更新时间：2023-09-26

我想知道按钮提交如何与 AJAX 交互以从数据作为 MySQL 查询进行选择，而无需刷新页面。我已经有一个与 AJAX 交互的文本框，以便在用户输入文本并按 Enter 时页面不会刷新，但不知道如何使按钮执行此操作，我下面的代码显示了如何在不刷新的情况下让文本框插入数据

这是我的文本框脚本

    <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";
}
?>

现在我需要做的就是让下面的按钮示例做类似的事情，但不是插入只是选择，我如何更改上面的脚本以允许按钮处理操作？ 

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


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>

您还没有向我们展示您如何尝试使您的按钮工作，那么我们如何为您提供反馈？ 基本上，您需要一个类似的 ajax 调用，该调用使用 GET 方法调用action_mail_view.php

阿贾克斯 

$.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;
相关文章：