循环这个ajax调用

时间:2017-03-13 00:11:07

标签: jquery ajax

在我的发票表单上,用户可以点击按钮添加所需数量的零件,然后下面的代码会自动填写零件描述和零件价格。

我试图循环它但它不起作用,而是我为partnumber1,partnumber2,partnumber3等添加了多个脚本。

<script type="text/javascript">

$( "#partstable" ).on( 'blur keyup', "#partnumber" , function() {

searchString=$(this).val();

   var data = 'partnumber='+searchString;

   if(searchString) {
       // ajax call

       $.ajax({
           type: "POST",
           url: "partpricequery.php",
           data: data,

          success: function(html){ 

result = String(html).split("|"),

$("#partdescription").val(result[0]);
$("#partprice").val(result[1]);

showlabel ();

         }
       });    
   }
   return false;
});

</script>

第二个

<script type="text/javascript">

$( "#partstable" ).on( 'blur keyup', "#partnumber1" , function() {

searchString=$(this).val();

   var data = 'partnumber='+searchString;

   if(searchString) {
       // ajax call

       $.ajax({
           type: "POST",
           url: "partpricequery.php",
           data: data,

          success: function(html){ 

result = String(html).split("|"),

$("#partdescription1").val(result[0]);
$("#partprice1").val(result[1]);


showlabel ();

         }
       });    
   }
   return false;
});

</script>

第3次

<script type="text/javascript">

$( "#partstable" ).on( 'blur keyup', "#partnumber2" , function() {

searchString=$(this).val();

   var data = 'partnumber='+searchString;


   if(searchString) {
       // ajax call

       $.ajax({
           type: "POST",
           url: "partpricequery.php",
           data: data,

          success: function(html){

result = String(html).split("|"),


$("#partdescription2").val(result[0]);
$("#partprice2").val(result[1]);

showlabel ();

         }
       });    
   }
   return false;
});

</script>

这就是我试图循环它但又无法正常工作的方式

<script type="text/javascript">

var count = 0;
$( "#partstable" ).on( 'blur keyup', "#partnumber"+count , function() {

searchString=$(this).val();

   var data = 'partnumber='+searchString;

   if(searchString) {
       // ajax call

       $.ajax({
           type: "POST",
           url: "partpricequery.php",
           data: data,

          success: function(html){ 

result = String(html).split("|"),

var counter=0;
loop{
$("#partdescription"+counter).val(result[0]);
$("#partprice"+counter).val(result[1]);
counter++;
}

showlabel ();

         }
       });    
   }
   return false;
});

</script>

1 个答案:

答案 0 :(得分:0)

我认为你的问题是count变量在上次执行后会有值。以下是验证(link)的实验:

for (var count = 0; count < 3; count++) {
  $('#btn' + count).on('click', function() {alert(count);});
}

假设有3个按钮,其中包含id btn0,btn1和btn2,但无论您点击哪个按钮,警报将始终显示3(循环结束后的值)。

一个丑陋的解决方法是使用Function函数(link)创建函数:

Function("alert(" + count + ");")

或者你可以创建一个匿名函数(link):

for (var count = 0; count < 3; count++) {
 (function(count) {
  $('#btn' + count).on('click', function() {alert(count);});
 })(count);
}