2015-02-06 52 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