如何使用动态 id 制作多个 ajax 触发器答案

【问题标题】：How to make multiple ajax trigger with dynamic id如何使用动态 id 制作多个 ajax 触发器
【发布时间】：2019-06-06 08:13:09
【问题描述】：

我已经为静态 id 编写了 ajax。我想转换成动态id但是不知道怎么转换。

这里的 id 是 textbox1，我有 textbox1 到 textbox10 和 rate1 到 rate10 它动态生成。那么该怎么做呢？

 $(document).on('change','#textbox1',function () {
        var prod_id=$(this).val();
        var a=$(this).parent();
        console.log(prod_id);
        var op="";
        $.ajax({
            type:'get',
            url:'{!!URL::to('search')!!}',
            data:{'id':prod_id},
            dataType:'json',//return data will be json
            success:function(data){
                console.log("price");
                console.log(data.rate);
                    // here price is column name in products table data.coln name
                a.find('#rate1').val(data.rate);
            },
            error:function(){}
        });
    });

【问题讨论】：

标签： php mysql ajax laravel

【解决方案1】：

使用class代替id

使用类属性生成动态文本框

<input type="text" name="prod_id" class="_my_textbox">

在js代码中：

$(document).on('change', '._my_textbox' ,function () {
        var prod_id=$(this).val();
        var a=$(this).parent();
        console.log(prod_id);
        var op="";
        $.ajax({
            type:'get',
            url:'{!!URL::to('search')!!}',
            data:{'id':prod_id},
            dataType:'json',//return data will be json
            success:function(data){
                console.log("price");
                console.log(data.rate);
                    // here price is column name in products table data.coln name
                a.find('#rate1').val(data.rate);
            },
            error:function(){}
        });
    });

【讨论】：

是的。这可以触发 ajax，但我需要打印的速率也是动态 id。您可以在代码中看到 a.find("#rate1")。你能建议如何做到这一点吗？
感谢您的回答。我找到了解决方案。

【解决方案2】：

由于您使用的是 select 元素，您可以使用 onchange 属性并将带有 id 的函数分配给它，这样您就可以在您的 js 中使用它。动态 id 必须来自 PHP 脚本，如下所示：

$stmt = $DBcon->prepare("SELECT txtbx_id, role_id FROM your_table WHERE you_conditions_if_u_have_any");
$stmt->execute();
$row = $stmt->fetchAll();
foreach ($row as $rows) {
    $txtbx_id= $rows['txtbx_id'];
    $role_id= $rows['role_id'];
    echo  '

    <div class="card">
       <select onchange="yourfunction('.$txtbx_id.', '.$role_id.')" >
          ....
       </select>
    </div> 
    ';
}

然后在您的 js 中，而不是在文档更改上，使用带有 ids 的函数作为变量，如下所示：

function yourfunction(textbox_id, role_id){
   // use the ids which are affected in here
   var prod_id=$(this).val();
   var a=$(this).parent();
   console.log(prod_id);
   var op="";
   $.ajax({
       type:'get',
       url:'{!!URL::to('search')!!}',
       data:{'id':prod_id},
       dataType:'json',//return data will be json
       success:function(data){
           console.log("price");
           console.log(data.rate);
              // here price is column name in products table data.coln name
           a.find('#rate1').val(data.rate);
       },
       error:function(){}
   });
});

【讨论】：

选择选项改变时生效，触发ajax。