Ajax成功功能不能正常工作

我做了一个简单的ajax/php表单，并且由于某种原因，我的成功功能无法正常工作。我仍然收到电子邮件，所以我想条件是真实的，但没有出现，提交按钮没有被阻止。这里是我的代码：Ajax成功功能不能正常工作

function myFunction() { 
 
      var name = document.getElementById("name").value; 
 
      var message = document.getElementById("message").value; 
 
      var company = document.getElementById("company").value; 
 
      var phone = document.getElementById("phone").value; 
 
      
 
     // Returns successful data submission message when the entered information is stored in database. 
 
     var dataString = 'name1=' + name + '&message1=' + message + '&company1=' + company + '&phone1=' + phone; 
 
      if (name == '' || message == '' || company == '' || phone == '') { 
 
      document.getElementById("error").style="display: block; color: red;"; 
 
     } else { 
 
      
 
      
 
     // AJAX code to submit form. 
 
      $.ajax({ 
 
      type: "POST", 
 
      url: "email.php", 
 
      data: dataString, 
 
      cache: false, 
 
      success: function() { 
 
       document.getElementById("success").style="display: block; color: green;"; 
 
      } 
 
      }); 
 
     } 
 
     return false; 
 
     }

<!DOCTYPE HTML> 
 
    <html> 
 
    
 
    <head> 
 
    
 
     <meta charset="utf-8"> 
 
     
 
     <title>AJAX + PHP форма</title> 
 
     
 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
     
 
     <style type="text/css"> 
 
     
 
     .input_group { 
 
      
 
      display:inline-block; 
 
      padding: 5px; 
 
      width:100%; 
 
      text-align: center; 
 
      
 
     } 
 
     
 
     form { 
 
      
 
      width: 50%; 
 
      
 
     } 
 
     
 
     #send_message { 
 
      text-align: center; 
 
     } 
 
     
 
     </style> 
 
     
 
     
 
    </head> 
 
    
 
    <body> 
 
     
 
     <form id="contact" action=""> 
 
     
 
     <fieldset> 
 
      
 
      <legend>AJAX + PHP форма</legend> 
 
      
 
      <div class = "input_group"> 
 
     
 
       <label for="name" id="name_label">Имя</label> <br/> 
 

 
       <input type="text" name="name" id="name" size="50" value="" class="text-input" required = "required"/> 
 
       
 
      </div> 
 
      
 
      <br/> 
 
      
 
      <div class = "input_group"> 
 

 
       <label for="company" id="company_label">Компания</label> <br/> 
 

 
       <input type="text" name="company" id="company" size="50" value="" class="text-input" required = "required" /> 
 
       
 
      </div> 
 
       
 
      <br/> 
 
      
 
      <div class = "input_group"> 
 
       
 
       <label for="phone" id="phone_label">Телефон</label> <br/> 
 

 
       <input type="text" name="phone" id="phone" size="50" value="" class="text-input" required = "required" /> 
 
       
 
      </div> 
 
      
 
      <br/> 
 
       
 
      <div class = "input_group"> 
 
       
 
       <label for="msg_text" id="msg_label">Запрос</label> <br/> 
 

 
       <textarea rows="6" cols="51" name="question" id="message" required = "required"></textarea> 
 
      
 
      </div> 
 
      
 
      <div class = "input_group"> 
 
     
 
       <input type="submit" onclick="myFunction()" id="submit" value="Отправить" /> 
 
       
 
      </div> 
 
      
 
      </fieldset> 
 
     
 
     </form> 
 
     
 
     <h2 style="display:none;" id ="error">Заполните все поля!</h2> 
 
     <h2 style="display:none;" id="success">Message sent!</h2>

列表项

来源

2017-02-09 atogz

你肯定的是，“成功”功能被启用？检查您的控制台和网络选项卡是否有错误，并检查ajax调用返回的HTTP状态代码。如果它不是200，那么“成功”将不会运行 - 相反，您应该处理“错误”回调 - 请参阅这里的ajax文档：http://api.jquery.com/jquery.ajax/ – ADyson

是的，我已经检查它，即时获得200.并获得电子邮件收件箱以及。 – atogz

p.s.你知道，不用手动构建你的数据串（这可能是错误倾向性的），你可以通过执行'$（“＃contact”）来节省自己的头痛。serialize（）;' – ADyson

不能设置样式属性与el.style字符串。无论是单独设置每个样式（.style.display ,. style.color，...），或使用

$('#success').css({display: 'block', color: 'green'})

来源

2017-02-09 10:00:01 Connum

https://jsfiddle.net/ 1vfvvbda/- 作品 – Developer

你是对的...我真的不知道，经过近20年的CSS ... – Connum

我同意这不是一个正确的方式做到这一点..即使我很惊讶地看到这个工作！不知道是否所有的浏览器都支持这个:) – Developer

这是这对我来说

<!DOCTYPE HTML> 
<html> 

<head> 

    <meta charset="utf-8"> 

    <title>AJAX + PHP форма</title> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 

    <style type="text/css"> 

    .input_group { 

     display:inline-block; 
     padding: 5px; 
     width:100%; 
     text-align: center; 

    } 

    form { 

     width: 50%; 

    } 

    #send_message { 
     text-align: center; 
    } 

    </style> 


</head> 

<body> 

    <form id="contact" action=""> 

    <fieldset> 

     <legend>AJAX + PHP форма</legend> 

     <div class = "input_group"> 

      <label for="name" id="name_label">Имя</label> <br/> 

      <input type="text" name="name" id="name" size="50" value="" class="text-input" required = "required"/> 

     </div> 

     <br/> 

     <div class = "input_group"> 

      <label for="company" id="company_label">Компания</label> <br/> 

      <input type="text" name="company" id="company" size="50" value="" class="text-input" required = "required" /> 

     </div> 

     <br/> 

     <div class = "input_group"> 

      <label for="phone" id="phone_label">Телефон</label> <br/> 

      <input type="text" name="phone" id="phone" size="50" value="" class="text-input" required = "required" /> 

     </div> 

     <br/> 

     <div class = "input_group"> 

      <label for="msg_text" id="msg_label">Запрос</label> <br/> 

      <textarea rows="6" cols="51" name="question" id="message" required = "required"></textarea> 

     </div> 

     <div class = "input_group"> 

      <input type="button" onclick="myFunction()" id="submit" value="Отправить" /> 

     </div> 

     </fieldset> 

    </form> 

    <h2 style="display:none;" id ="error">Заполните все поля!</h2> 
    <h2 style="display:none;" id="success">Message sent!</h2> 

<script> 
    function myFunction() { 
     var name = document.getElementById("name").value; 
     var message = document.getElementById("message").value; 
     var company = document.getElementById("company").value; 
     var phone = document.getElementById("phone").value; 

    // Returns successful data submission message when the entered information is stored in database. 
    var dataString = 'name1=' + name + '&message1=' + message + '&company1=' + company + '&phone1=' + phone; 
     if (name == '' || message == '' || company == '' || phone == '') { 
     document.getElementById("error").style="display: block; color: red;"; 
    } else { 

    // AJAX code to submit form. 
     $.ajax({ 
     type: "POST", 
     url: "demo.php", 
     data: dataString, 
     cache: false, 
     success: function(data) { 
      alert(data) 
      $('#success').css({display: 'block', color: 'green'}); 
     } 
     }); 
    } 
    return false; 
    } 
</script>

工作正常，你的最终代码，这是演示PHP文件

<?php 
print_r($_REQUEST); 
?>

刚刚更新按钮类型提交按钮

来源

2017-02-09 10:03:22

你确定吗？-https：//jsfiddle.net/1vfvvbda/ – Developer

几年前我遇到过这个问题，但我看到它现在正在工作。很抱歉 –

我同意这是不正确的做法..我很惊讶地看到这个工作!!!不知道是否所有的浏览器都支持这个:) – Developer

Ajax成功功能不能正常工作

回答

相关问题