2015-02-06 53 views
-4

HTMLAJAX HTML返回内部调用AJAX防止第一AJAX脚本进一步工作

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
... 
... 
<form id="validate_mail" action="/wp-content/custom-php/validate_mail.php" method="POST"> 
    <input name="mail_name" type="text" value="" /> 
    <input type="submit" value="submit" /> 
</form> 
<div id="validate_mail_result"></div> // placeholder for html code that is returned 
<script> // main script 
    var form=$('#validate_mail'); 
    form.submit(function(ev){ 
     $.ajax({ 
      type : form.attr('method'), 
      url  : form.attr('action'), 
      data : form.serialize(), 
      success : function(result{ 
       $('#validate_mail_result').html(result); 
      } 
     }); 
     ev.preventDefault(); 
    }); 
</script> 

PHP(这是由主脚本调用)

<?php 
    ... 
    ... 
    // Connect to MySQL 
    $servername = "localhost"; 
    $username = "myusername"; 
    $password = "mypassword"; 
    $connection = new mysqli($servername,$username,$password); 
    if (mysqli_connect_errno()){ 
     printf("MyErrorMsg: %s\n", mysqli_connect_error()); 
     exit(); 
    } 
    // Perform request 
    $mail_name = $_POST[mail_name]; 
    $full_mail_name = $mail_name . "@mydomain.me"; 
    $connection->select_db("MAILSERVER"); 
    $queryMailExists = "SELECT id FROM users WHERE mailname = '" . $mail_name . "'"; 
    $resultMailExists = $connection->query($queryMailExists); 
    $row_cnt = $resultMailExists->num_rows; 
    $connection->close(); 
    if (is_valid_email_address_5321($full_mail_name)==0){ 
     echo "Not a valid email-address according to RFC5321"; 
    }elseif(row_cnt==0){ //check if email name allready taken 
     echo "Mail available"; 
     echo " 
     <form id=\"purchase_mail\" action=\"/wp-content/custom-php/purchase_mail.php\" method=\"POST\"> 
      <input id=\"password\" style=\"width: 280px;\" name=\"password\" type=\"password\" value=\"\" /> 
      <div id=pswrd_struct_chk></div> 
      <input id=\"password_retyped\" style=\"width: 280px;\" name=\"password_retyped\" type=\"password\" value=\"\" /> 
      <div id=pswrd_match_chk></div> 
      <script> // this script and the one after this are blocking the main script 
       var form=$('#purchase_mail'); 
       $('#password').keyup(function(ev){ 
        $.ajax({ 
         type : form.attr('method'), 
         url  : \"/wp-content/custom-php/password_structure_check.php\",//just checks if the password strength is weak/acceptable/good 
         data : form.serialize(), 
         success : function(result){ 
          $('#pswrd_struct_chk').html(result); 
         } 
        }); 
        $('#password_retyped').val(\"\"); 
        $('#pswrd_match_chk').html(\"\"); 
       }); 
      </script> 
      <script> 
       var form=$('#purchase_mail'); 
       $('#password_retyped').keyup(function(ev){ 
        $.ajax({ 
         type : form.attr('method'), 
         url  : \"/wp-content/custom-php/password_match_check.php\", 
         data : form.serialize(), 
         success : function(result){ 
          $('#pswrd_match_chk').html(result); 
         } 
        }); 
       }); 
      </script> 
      <input type=\"submit\" value=\"PAY\" /> 
     "; 
    }else{ 
     echo "<div>Mailname allready taken!</div>"; 
    } 
?> 

当我注释掉两个最后的脚本一切按预期工作。这三个不同的if - 在PHP中的案例都会将它们的html代码回显到占位符中,但是当我在执行“elseif(row_cnt==0)”部分时未将注释留在脚注中时,主脚本会卡住,并且我没有得到另外两个的任何回显if - 无论什么submited(输入在id=mail_name的输入字段中)。

我无法谷歌我的问题。

感谢您的时间尽头努力。

+2

这似乎是一个混乱的方式来验证电子邮件?为什么不创建一个仅检查数据库的简单PHP脚本,并将getgo中的javascript保存在主页上。 – adeneo 2015-02-06 18:28:18

+0

在PHP中失踪''标签rsponse是一个错字?另外''成功:function(result {'似乎是不正确的语法(在HTML中) – 2015-02-06 18:46:14

+0

'row_cnt'需要一个'$'...这是一个PHP脚本,对吗?你看了你的错误日志吗?会提到这个...... :-D – Mike 2015-03-25 21:32:51

回答

0

忽略这里提到的错误(无效的HTML,无效的PHP等),你最简单的(也是最好的)解决方案就是重构你的代码,所以它不返回HTML/JS。只需将当前由PHP返回的所有HTML/JS放入您的页面并隐藏它即可。让PHP返回某种状态代码(“invalid-email”/“ok”/“taken”等),并让jQuery隐藏/取消隐藏页面上的相应响应。这样可以保持演示文稿与业务逻辑之间的关系分离。

0

如果您使用jQuery 1.7版本及以上

变化

var form=$('#validate_mail'); 
form.submit(function(ev){ 
    $.ajax({ 

要:

var $(document).on('submit','#validate_mail',function(ev){ 
    $.ajax({ 

也可以尝试,并在main.js文件可能让你的JQuery脚本一起,绝对是远离你的PHP。所以你应该按照我描述的方式直接在你的#validate_mail提交函数下编写#purchase_mail的JS,并且当你将表单加入到页面中时它会工作。

除非您以某种方式评估eval(),否则您将使用Ajax插入的脚本将无法工作,但这样做会打开您的脚本以应对潜在的安全漏洞。

希望帮助花花公子

4

AJAX不允许脚本标签,从而在结果被传递时类型是HTML。假设您以某种方式设法传递脚本,您仍然需要重新触发有点麻烦的脚本。

我建议你在成功消息中写入html添加代码,并从PHP传递诸如表单动作,URL等变量。这样你就不会面对这些问题,你也将能够完成工作。

2

我检查了你的代码。你可以尝试做这样的事情: 首先AJAX:

$.ajax({ 
//logic for the first ajax 
}).done(function(){ 
//**second ajax** 
}) 
2

,首先你应该遵循下列原则:
在PHP脚本 - 只是PHP代码,没有JS和CSS; 在js脚本 - 只是js,没有css。**
它不只是一个很好的风格,它会帮助你方便你的工作!

我只是将你的HTML和JS从validate_mail.php到主页面,它看起来像:

<html> 
    <head></head> 
    <body> 
     <form id="validate_mail" action="/wp-content/custom-php/validate_mail.php" method="POST"> 
      <input name="mail_name" type="text" value="" /> 
      <input id="btn_validate_mail" type="button" value="submit" /> 
     </form> 
     <div id="validate_mail_result1" style="display: none;">Not a valid email-address according to RFC5321</div> 
     <div id="validate_mail_result2" style="display: none;"> 
      Mail available 
      <form id="purchase_mail" action="/wp-content/custom-php/purchase_mail.php" method="POST"> 
       <input id="password" style="width: 280px;" name="password" type="password" value="" /> 
       <div id="pswrd_struct_chk"></div> 
       <input id="password_retyped" style="width: 280px;" name="password_retyped" type="password" value="" /> 
       <div id="pswrd_match_chk"></div> 
      </form> 
     </div> 
     <div id="validate_mail_result3" style="display: none;">Mailname allready taken!</div> 
    </body> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    <script> 
     $('#btn_validate_mail').click(function() { 
      var form = $('#validate_mail'); 
      $.ajax({ 
       type: form.attr('method'), 
       url: form.attr('action'), 
       data: form.serialize(), 
       success: function (result) { 
        $('#validate_mail_result'+result).show(); 
       }, 
       error: function (xhr, status, error) { 
        // If you will receive any errors - you will see it here. 
        console.log(error); 
       }, 
       complete: function() { 
        form.hide(); 
       } 
      }); 
     }); 
     $('#password').keyup(function(ev){ 
      var form=$('#purchase_mail'); 
      $.ajax({ 
       type : form.attr('method'), 
       url  : "/wp-content/custom-php/password_structure_check.php",//just checks if the password strength is weak/acceptable/good 
       data : form.serialize(), 
       success : function(result){ 
        $('#pswrd_struct_chk').html(result); 
       } 
      }); 
      $('#password_retyped').val(""); 
      $('#pswrd_match_chk').html(""); 
     }); 
     $('#password_retyped').keyup(function(ev){ 
      var form=$('#purchase_mail'); 
      $.ajax({ 
       type : form.attr('method'), 
       url  : "/wp-content/custom-php/password_match_check.php", 
       data : form.serialize(), 
       success : function(result){ 
        $('#pswrd_match_chk').html(result); 
       } 
      }); 
     }); 
    </script> 
</html> 

它看起来好多了,但还是太可怕了。而且js不应该在这里,并且css也是。

现在validate_mail.php样子:

<?php 

    $servername = "localhost"; 
    $username = "myusername"; 
    $password = "mypassword"; 
    $connection = new mysqli($servername,$username,$password); 
    if (mysqli_connect_errno()){ 
     printf("MyErrorMsg: %s\n", mysqli_connect_error()); 
     exit(); 
    } 
    // Perform request 
    $mail_name = $_POST['mail_name']; 
    $full_mail_name = $mail_name . "@mydomain.me"; 
    $connection->select_db("MAILSERVER"); 
    $queryMailExists = "SELECT id FROM users2 WHERE mailname = '" . $mail_name . "'"; 
    $resultMailExists = $connection->query($queryMailExists); 
    $row_cnt = $resultMailExists->num_rows; 
    $connection->close(); 
    if (is_valid_email_address_5321($full_mail_name)==0){ 
     echo 1; 
    }elseif($row_cnt==0){ //check if email name allready taken 
     echo 2; 
    }else{ 
     echo 3; 
    } 

容易得多......

我不想谈XSS,SQL注入及其他,因为你的问题不是关于它,但你应该记住它。
你需要继续单独js和HTML和CSS ...

我只是尽量展示它可以更容易达到你所需要的...希望这将有助于...

2

好消息。你的代码中只有错别字。我在本地服务器上运行相关的部分,脚本按预期执行。请享用!

HTML

<html> 
    <head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
    </head> 
    <body> 
     <form id="validate_mail" action="validate_mail.php" method="POST"> 
      <input name="mail_name" type="text" value="" /> 
      <input type="submit" value="submit" /> 
     </form> 
     <div id="validate_mail_result"></div> 
     <script> // main script 
      var form = $('#validate_mail'); 
      form.submit(function(ev){ 
       $.ajax({ 
        type : form.attr('method'), 
        url  : form.attr('action'), 
        data : form.serialize(), 
        // success : function(result{ <-- typo 
        success : function(result){ 
         $('#validate_mail_result').html(result); 
        } 
       }); 
       ev.preventDefault(); 
      }); 
     </script> 
    </body> 
</html> 

PHP - validate_mail.php

<?php 
    // }elseif(row_cnt==0){  <-- typos here too, maybe more above, didn't check 
    // }else if($row_cnt == 0){ 

     echo "Mail available"; 
     echo " 
     <form id=\"purchase_mail\" action=\"/wp-content/custom-php/purchase_mail.php\" method=\"POST\"> 
      <input id=\"password\" style=\"width: 280px;\" name=\"password\" type=\"password\" value=\"\" /> 
      <div id=pswrd_struct_chk></div> 
      <input id=\"password_retyped\" style=\"width: 280px;\" name=\"password_retyped\" type=\"password\" value=\"\" /> 
      <div id=pswrd_match_chk></div> 
      <script> // this script and the one after this are blocking the main script 
       var form=$('#purchase_mail'); 
       $('#password').keyup(function(ev){ 
        $.ajax({ 
         type : form.attr('method'), 
         url  : \"/wp-content/custom-php/password_structure_check.php\",//just checks if the password strength is weak/acceptable/good 
         data : form.serialize(), 
         success : function(result){ 
          $('#pswrd_struct_chk').html(result); 
         } 
        }); 
        $('#password_retyped').val(\"\"); 
        $('#pswrd_match_chk').html(\"\"); 
       }); 
      </script> 
      <script> 
       var form=$('#purchase_mail'); 
       $('#password_retyped').keyup(function(ev){ 
        $.ajax({ 
         type : form.attr('method'), 
         url  : \"/wp-content/custom-php/password_match_check.php\", 
         data : form.serialize(), 
         success : function(result){ 
          $('#pswrd_match_chk').html(result); 
         } 
        }); 
       }); 
      </script> 
      <input type=\"submit\" value=\"PAY\" /> 
     "; 
    //}else{ 
    // echo "<div>Mailname allready taken!</div>"; 
    //} 
?> 
+0

你好,你能证实这确实解决了你的问题吗? – Drakes 2015-04-06 16:50:35