如何使用AJAX调用多个功能

Question

In this code I am using AJAX. I want to append the values in a td . I already append the values for one column and after that I want to append the values of second td . I don't know how to do this. See below my code what is my requirement i mentioned below my code. Insteed of htmlString += '<td>' + 'castename' + '</td>'; I want call the function castename() .

$(document).ready(function(){
        $("#reservation").on("change", function() {
           var reservation = $(this).val();
              $.ajax({
                  type: 'post',
                  url: 'date-range.php',
                  data: {
                      logindate: reservation,
                  },
                  async : false,
                 success: function(data) {
                  var res = jQuery.parseJSON(data); // convert the json
                  console.log(res);
                  if (res['status'] == "success") {
                    $('#datatable-editable > tbody').empty();//emtpy tbody at the begining
                    $.each(res['data'], function(key, value) {
                      var htmlString = ''; //Place declaration inside each
                      htmlString += '<tr>';
                      var ssm_id = value.ssm_id; // here i got ssmid
                      htmlString += '<td>' + value.ssm_id + '</td>';

                      $.ajax({
                        type: 'post',
                        url: 'config/functions.php',
                        data: {
                          'ssm_id': ssm_id,
                         /* 'caste':ssm_id,
                          'reg_date':ssm_id,
                          'status':ssm_id,
                          'source':ssm_id*/
                        },
                        async : false,
                        success: function(fname) {
                          htmlString += '<td>' + fname + '</td>'; 
                          htmlString += '</tr>';
                          $('#datatable-editable > tbody').append(htmlString);
                        }
                      });


                      $.ajax({
                        type: 'post',
                        url: 'config/functions.php',
                        data: {
                          'caste': ssm_id,

                        },
                        async: false,
                        success: function(caste) {
                          htmlString += '<td>' + caste + '</td>'; 
                          htmlString += '</tr>';
                          $('#datatable-editable > tbody').append(htmlString);
                        }
                      });

                    });

                  }
                }
              });
            });
        });

mycode.php

<?php
    $ssm_id = $_POST['ssm_id'];
    $caste_name = $_POST['caste'];
    $reg_date = $_POST['reg_date'];

    if (!empty($ssm_id))
    {
        echo firstname($ssm_id);
    }

    if (!empty($caste_name)) {
        echo castename($caste_name);
    }

    if (!empty($reg_date)) {
        echo regdate($reg_date);
    }

    function firstname($id)
    {
        $f = "SELECT firstname FROM register WHERE matri_id='$id'";
        $rr = mysql_query($f);
        while ($row=mysql_fetch_array($rr))
        {
            $firstname = $row['firstname'];
        }
        return $firstname;
    }

    unction castename($id)
    {
        $f = "select caste_name from caste where caste_id='$id'";
        $rr = mysql_query($f);
        while ($row=mysql_fetch_array($rr))
        {
            $caste_name = $row['caste_name'];
        }
        return $caste_name;
    }

    function regdate($id)
    {
        $f = "SELECT reg_date FROM register WHERE matri_id='$id'";
        $rr = mysql_query($f);
        while ($row=mysql_fetch_array($rr))
        {
            $reg_date = $row['reg_date'];
        }
        return $reg_date;
    }
?>

Answer 1

Seems your ajax request's success function are overlapped.

User Ajax async:false

For more information see click on this

Try this :-

$(document).ready(function() {
    $("#reservation").on("change", function() {
        var reservation = $(this).val();
        $.ajax({
            type: 'post',
            url: 'date-range.php',
            data: {
                logindate: reservation,
            },
            async: false,
            success: function(data) {
                var res = jQuery.parseJSON(data); // convert the json
                console.log(res);
                if (res['status'] == "success") {
                    $('#datatable-editable > tbody').empty(); //emtpy tbody at the begining
                    $.each(res['data'], function(key, value) {
                        var htmlString = ''; //Place declaration inside each
                        htmlString += '<tr>';
                        var ssm_id = value.ssm_id; // here i got ssmid
                        htmlString += '<td>' + value.ssm_id + '</td>';

                        $.ajax({
                            type: 'post',
                            url: 'config/functions.php',
                            data: {
                                'ssm_id': ssm_id,
                                /* 'caste':ssm_id,
                                 'reg_date':ssm_id,
                                 'status':ssm_id,
                                 'source':ssm_id*/
                            },
                            async: false,
                            success: function(fname) {
                                htmlString += '<td>' + fname + '</td>';                                                              
                            }
                        });


                        $.ajax({
                            type: 'post',
                            url: 'config/functions.php',
                            data: {
                                'caste': ssm_id,

                            },
                             async: false,
                            success: function(caste) {
                                htmlString += '<td>' + caste + '</td>';
                            }
                        });
                    htmlString += '</tr>';
                    $('#datatable-editable > tbody').append(htmlString);
                    });

                }
            }
        });
    });
});