Question

我使用一些Jquery / ajax代码根据select的值刷新div的内容。所以我有这个：

<select id="agence" name="agence" class="selectpicker scrollMe " data-style="btn-default" onchange="getContent('divmailsav')">
    <option value="1">1</option>
    <option value="2">2</option>
</select>
<div id="divmailsav">
    <?php include 'formmail.php'; ?>
</div>

GetContent是：

function getContent(x){
  var xhr=null;
  if(window.XMLHttpRequest){xhr=new XMLHttpRequest();}
  else if(window.ActiveXObject){xhr=new ActiveXObject("Microsoft.XMLHTTP");}
  envoi = "formmail.php?agence="+$('#agence').val()+"&soc=<?php echo $_SESSION['SOC'] ?>";
  xhr.open("GET",envoi,false);
  xhr.send(null);
  obj=document.getElementById(x);
  obj.innerHTML =xhr.responseText;
}

这非常棒。

但这里面是“formmail.php”中的内容

 <label for="inputEmail1" class="col-sm-2 control-label">Mail 1</label>
 <div class="col-sm-6">
  <input type="email" class="form-control" name="PMCPYMAIL1" id="inputEmail1" onkeyup="onkeyupmail(1,'')" placeholder="Email" value="<?php echo getmail('PMCPYMAIL1')?>">
</div>
<input type="text" value="Envoyer mail de test" id="buttonmail1" onclick="onclickmail(1,'');" class="btn btn-default col-sm-2">
<input type="text" value="Effacer" class="btn btn-danger btn-mini col-sm-1" id="amail1" onclick="deletemail(1,'')" style="margin-left: 35px;">


<div class="col-sm-offset-2 col-sm-9">
 <input type="submit" value="Valider" class="btn btn-primary">
</div>  

<script type="text/javascript">
  alert('tada');
  pageLoad = function(){

    if ($('#inputEmail1' ).val() == ''){
      $('#buttonmail1').hide();
      $('#amail1').hide();
    }
  };
  pageLoad();

</script>

如果输入的电子邮件为空，脚本应隐藏输入文本。当我第一次加载页面时（警报'tada'显示），但是当它从ajax调用调用时，它运行良好。你能帮我找到原因吗？提前致谢。

Answer 1

function getContent(x){
  var xhr=null;
  if(window.XMLHttpRequest){xhr=new XMLHttpRequest();}
  else if(window.ActiveXObject){xhr=new ActiveXObject("Microsoft.XMLHTTP");}
  envoi = "formmail.php?agence="+$('#agence').val()+"&soc=<?php echo $_SESSION['SOC'] ?>";
  xhr.open("GET",envoi,false);
  xhr.send(null);
  obj=document.getElementById(x);

  if(xhr.responseText != ""){
      obj.innerHTML =xhr.responseText;
  }else{
      $('#buttonmail1').hide();
      $('#amail1').hide();
  }
}

---------------新代码块1 -----------------

//在发送到服务器

之前，使用此选项检查电子邮件输入框是否有空值

 <script>
        $(document).ready(function(){

            $('form').click(function(){
                var emptyVals = [];
                $(".form-control").each(function(){
                    if($(this).val() == ""){
                        emptyVals.push($(this));
                    }
                });
                if(emptyVals.length > 0){
                    // don't send form one or more email values are empty
                }
            });

        });
    </script>

---------------新代码块2 -----------------

//这就是我建议发送AJAX（使用jQuery）的方式

 <script>
        $(document).ready(function(){
            function getContent(){
                $.ajax({
                    url:"formmail.php",
                    data:"agence="+$('#agence').val()+"&soc=<?php echo $_SESSION['SOC'] ?>"
                }).done(function(data){
                    if(data!=""){
                        // checks to see if there is an empty string at the load of the content

                    }
                })
            }

        });
    </script>

---------------新代码块3 -----------------

//从头开始隐藏所有btns（你也可以从中推断出如何分别隐藏每个单独的元素）

$(document).ready(function(){

    $(".form-control").each(function(){
        $(this)
           .parent()
              .next("input.btn")
                 .hide()
                   .next("input.btn-danger")
                      .hide();
});

Answer 2

如果你手动使用XMLHttpRequest而不是jQuery的$ .Ajax（），那么你需要使用“onreadystatechange”：

var xhr = null;

function getContent(x){
  if(window.XMLHttpRequest){xhr=new XMLHttpRequest();}
  else if(window.ActiveXObject){xhr=new ActiveXObject("Microsoft.XMLHTTP");}
  envoi = "formmail.php?agence="+$('#agence').val()+"&soc=<?php echo $_SESSION['SOC'] ?>";
  xhr.open("GET",envoi,false);
  xhr.send(null);
  xhr.onreadystatechange = handleResponse;
}

function handleResponse() {
  var result;

  if (xhr.readyState == 4) {
    if (xhr.responseText != "") {
      $('#' + x).html(xhr.responseText);
    }
    else {
      $('#buttonmail1').hide();
      $('#amail1').hide();
    }
  }
}

在AJAX调用后执行javascript

2 个答案: