使用相同的JSON数据键调用一个php文件的多个Ajax调用

Question

I am trying to validate list of dynamic text fields. Validation needs an AJAX call to interact with server. At the backend I have written just one php file that reads the input request data and performs operation. Below is the example.

abc.js

row_count = 6
for (i = 1; i <=row_count; i++) {
    id = "#val"+i.toString() ;
    $(id).change(function(){
        input_val="random";
        $.ajax({
            url:"url.php",
            type:post,   
            async:true,
            dataType: 'json',
            data : {temp:input_val},
            success:function(result){},
            error: function (request, status, error) {}
        });
    });
}           

url.php

<?php
$random_val = $_POST['temp'];
$cmd = 'systemcommand '.$random_val;
$flag = exec($cmd);
if ($flag == 0){
    echo json_encode(array("status"=>'Fail'));
}
else{
    echo json_encode(array("status"=>'Success'));
}
?>

It works fine when the row_count = 1 (Just one text field) but fails when the input is more than 1. When the count is more than 1, the php script is not able to read the request data(The key in JSON data "temp"). it is blank in that case. Any lead or help should be appreciated. Thanks

Answer 1

Your javascript bit needs some adjusting, because you do not need to define an ajax for every single element. Use events based on a class. Also, since input behave differently than select, you should setup two different event class handlers.

function validateAjax ( element ) {
    var input_val = element.val();// get the value of the element firing this off
    $.ajax({
        url: "url.php",
        type: 'post',   
        async: true,
        dataType: 'json',
        data : { temp: input_val },
        success: function(result) {
            // check your result.status here
        },
        error: function (request, status, error) { }
    });
}
$(".validate_change").on("change",function() { // for selects
    validateAjax( $(this) );
});
$(".validate_input").on("input",function() { // for text inputs
    validateAjax( $(this) );
});

And for your select or input you add that appropriate class.

<select class="validate_change" name="whatever"><options/></select>
<input class="validate_input" name="blah">

PS

I really worry about this code you have:

$cmd = 'systemcommand '.$random_val;
$flag = exec($cmd);

So, you are just executing anything that is coming in from a webpage POST var??? Please say this website will be under trusted high security access, and only people using it are trusted authenticated users :-)