PHP / JS：回应几个变量而不会失去它们的价值

发布时间：2020-12-13 17:20:19 所属栏目：PHP教程来源：网络整理

导读：我建立的JS / Ajax函数没有按钮点击或页面刷新.该函数获取输入字段的值,并使用php回显结果.但每次回显变量时,下一个变量都会擦除前一个变量的值.怎么能避免这个？ EXAMPLE JS script$(document).ready(function() { var timer = null; var dataString; funct

我建立的JS / Ajax函数没有按钮点击或页面刷新.该函数获取输入字段的值,并使用php回显结果.但每次回显变量时,下一个变量都会擦除前一个变量的值.怎么能避免这个？ EXAMPLE

<script>
$(document).ready(function() {
  var timer = null; 
    var dataString;   
      function submitForm(){
        $.ajax({ type: "POST",url: "index.php",data: dataString,success: function(result){
                         $('#special').html('<p>' +  $('#resultval',result).html() + '</p>');
                                           }
                 });
                 return false; }

    $('#contact_name').on('keyup',function() {
    clearTimeout(timer);
    timer = setTimeout(submitForm,050);
          var name = $("#contact_name").val();
    dataString = 'name='+ name;
    });

     $('#email').on('keyup',function() {
     clearTimeout(timer);
     timer = setTimeout(submitForm,050);
     var name = $("#email").val();
     dataString = 'name='+ name;
     });

     $('#phone').on('keyup',050);
     var name = $("#phone").val();
     dataString = 'name='+ name;
     });

     $('#address').on('keyup',050);
     var name = $("#address").val();
     dataString = 'name='+ name;
     });

     $('#website').on('keyup',050);
     var name = $("#website").val();
     dataString = 'name='+ name;
     });


 }); 
</script>

HTML / PHP

<form action="" method="post" enctype="multipart/form-data" id="contact_form" name="form4"> 
     <div class="row">  
      <div class="label">Contact Name *</div> <!-- end .label --> 
        <div class="input"> 
          <input type="text" id="contact_name" class="detail" name="contact_name" value="<?php $contact_name ?>" />  
          <div id="special"><span id="resultval"></span></div>  
        </div><!-- end .input--> 
     </div><!-- end .row --> 
     <div class="row">  
      <div class="label">Email Address *</div> <!-- end .label --> 
       <div class="input"> 
        <input type="text" id="email" class="detail" name="email" value="<?php $email ?>" />  
        <div id="special"><span id="resultval"></span></div> 
       </div><!-- end .input--> 
     </div><!-- end .row --> 
    </form>

解决方法

你可以使用append()方法：

success: function(result){
        $('#special').append('<p>' + result + '</p>');
}

因为您已经为输入设置了类似的类,您可以缩小代码：

$('.detail').on('keyup',function() {
    clearTimeout(timer);
    var name = $(this).val();
    dataString = 'name='+ name;
    timer = setTimeout(submitForm,050);
 });

请注意,ID必须是唯一的,并且重复地从服务器请求数据效率不高.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!