Ajax Button для извлечения данных без обновления?

Question

Я хотел бы знать, как кнопка submit может взаимодействовать с AJAX для выбора данных в виде запроса MySQL без обновления страницы. У меня уже есть текстовое поле, взаимодействующее с AJAX, так что страница не обновляется, когда пользователь вводит текст и нажимает кнопку ввода, но понятия не имеет, как сделать кнопку сделать это мой код ниже показывает, как im получает текстовое поле для вставки данных без освежающий

Вот мой сценарий для текстового поля

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

?> 

Теперь все, что нужно сделать, это есть в приведенном ниже примере кнопки сделать что-то подобное, но вместо того, чтобы ВСТАВИТЬ только SELECT, как я могу ge вышеупомянутый скрипт, чтобы позволить кнопке обрабатывать действие, пожалуйста?

<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

Вы не показали нам, как вы пытались сделать вашу кнопку работу, так как мы можем дать вам обратную связь? В основном вы хотите аналогичный Ajax вызов, который вызывает action_mail_view.php используя GET метод

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;