将变量从一个ajax函数传递到另一个ajax函数

Question

I am new to php and ajax things. i want to know that is it possible to pass a variable from one ajax success function to another ajax data field. following are two ajax calls.

$("#submit_btn").on("click",function(e) {
    $.ajax({
    url: "./script.php",
    type: 'POST',
    data: {
        name: $('#clientName').val(),
        email: $('#clientEmail').val(),
        question: $("#quiz").val()
    }
}).done(function(data){
        //alert(data);
        //console.log(data);

});

});

On first success function return clientName. Now i want to send this clientName in insert.php through second ajax call. The second ajax call is as follows:

$("#chat_send_btn").on("click",function(e) {
    $.ajax({
    url: "./insert.php",
    type: 'POST',
    data: {
            textarea:$('#hidden_textarea').val(document.getElementById('text_area').innerHTML),
            customerName: data
    }

}).done(function(data){
    $('html, div').animate({scrollTop: $('#chat_messages_area').height()+5000});
});

});

this is insert.php. is it ok or am i doing something wrong?

<?php
session_start();    
require 'connect.php';
$uname ='';
$msg = '';
$tableName= "logs";
if(isset($_POST['textarea']) && isset($_POST['data']))
{
   $msg = $_POST['textarea'];
   $uname = $_POST['data'];
   $sql_insertquery = "INSERT INTO `logs` (`msgID`, `username`, `msg`) VALUES (NULL, '$uname', '$msg');";
   $sth = $conn->query($sql_insertquery);
   $sql_selectquery = "SELECT * FROM logs";

}
else{echo "error";}
?>

Answer 1

创建一个隐藏的输入/自定义属性，并在第一个ajax完成时将名称保存在那里，然后显示聊天，在第二个ajax调用中，您只需引用该隐藏的输入/自定义属性值

Answer 2

Here are 2 approaches:

1. Set the value needed in a hidden html field on first call success and then obtain it in the next Ajax call

2. Store the value in a global javascript variable that you set within the first ajax call then catch in the second call

Answer 3

Easiest way is to use a global variable and set its value to the success value and then use it in the second ajax call like below :

var clientName = '';
$("#submit_btn").on("click",function(e) {
    $.ajax({
        url: "./script.php",
        type: 'POST',
        data: {
            name: $('#clientName').val(),
            email: $('#clientEmail').val(),
            question: $("#quiz").val()
        }
    }).done(function(data){

        //alert(data);
        //console.log(data);

        //Set the clientName data here 
        clientName = data.clientName;

    });

});

Now use this variable value in second ajax call :

//append the clientName data to be sent to second ajax in your data

$("#chat_send_btn").on("click",function(e) {
    $.ajax({
        url: "./insert.php",
        type: 'POST',
        data: {clientName : clientName}, //passed clientName data from first ajax call success   
    }).done(function(data){

        $('html, div').animate({scrollTop:$('#chat_messages_area').height()+5000});
    });
});

Another solution would be to set a data attribute for the "#chat_send_btn" button with the required data value from first ajax call and then use it in second ajax call :

//first ajax call success code 
.done(function(data){

        //alert(data);
        //console.log(data);

        //Set the clientName data here 
        $('#chat_send_btn').data('clientName', data.clientName);

});

And then use it in second ajax using $('#chat_send_btn').data('clientName') ;