1. 首頁
  2. 問答
  3. 如何通過JavaScript調用我的PHP文件

如何通過JavaScript調用我的PHP文件

2012-08-13 34 views
-2

可能重複：
[PHP/JavaScript]: Call PHP file through JavaScript code with argument如何通過JavaScript調用我的PHP文件

好了，所以我使用JavaScript來驗證我的HTML表單的輸入值，但我用PHP寫這些值進入數據庫。 是否可以通過Javascript將我的表單發送到PHP文件？

這就是我沒有使用Javascript的情況下完成的，它應該在您點擊提交按鈕到PHP文件時發送表單。 這是我原來的形式：

<form name="filler" method="post" action="display.php"> 
//form stuff 
</form>

這裏的，據我已經得到了。儘管我無法看到任何應該錯誤的東西，但在使用Javascript驗證我的表單時卻什麼也沒有發生，但無論我輸入什麼內容，它都會立即進入PHP。它還有什麼問題？

<!DOCTYPE HTML> 

<html> 
<head> 
<script type="text/javascript"> 
    function required1(n,s,u,e,d,p,cp,g) 
    { 
     if (n.value.length > 0 && s.value.length > 0 && u.value.length > 0 && e.value.length > 0 && d.value.length > 0 && p.value.length > 0 && cp.value.length > 0 && g.value.length > 0) 
       { 
      return true; 
     { 
     else 
     { 
      alert('You have not filled in all the fields'); 
      return false; 
     } 
    } 
    function required2(e) 
    { 
     if(e.indexOf('.') != -1 && e.indexOf('@') != -1) 
     { 
      return true; 
     } 
     else 
     { 
      alert('Not a valid email address'); 
      return false; 
     } 
    } 
    function required3(d) 
    { 
     if(/^\d{2}\/\d{2}\/\d{4}$/.test(d)) 
     { 
      return true; 
     } 
     else 
     { 
      alert('Date is not in the right format (DD/MM/YYY)'); 
      return false; 
     } 
    } 
</script> 
</head> 
<body> 
<form name="filler" method="post" action="display.php" onsubmit="return required1(document.filler.name,document.filler.surname,document.filler.username,document.filler.email,document.filler.dob,document.filler.password,document.filler.confirm_password,document.filler.gender) && required2(document.filler.email) && required3(document.filler.dob) "> 
    <input name="name" placeholder="Name..."/> 
    <input name="surname" placeholder="Surname..."/> 
    <input name="username" placeholder="Username..."/> 
    <input name="email" placeholder="Email address..."/> 
    <input name="dob" placeholder="YYYY/MM/DD"/> 
    <input name="password" placeholder="Password" type="password"/> 
    <input name="confirm_password" placeholder="Password" type="password"/> 
    <input name="gender" placeholder="Gender..."/> 
    <input type="submit" value="Submit"/> 
</form> 
</body> 
</html>

來源

2012-08-13 Hendrik Human

+0

不需要爲一些簡單的像這樣的AJAX，只是處理提交事件，如果表單無效，返回false /停止傳播，否則讓它繼續。希望你也在php中進行驗證。 – wgcrouch 2012-08-13 17:11:13

+0

沒有嘗試js，我會說所有的'== 0'應該是'> 0'。如果你使用jQuery，'.value'是'.val（）'，你不需要內聯提交處理器（你可以在js部分添加一個表單的事件處理器）。 – jeroen 2012-08-13 17:36:32

+0

感謝條件測試是一個愚蠢的錯誤。不要在這裏只是js。是否應該按照原樣提交，如果函數返回true？ – 2012-08-13 17:41:33

回答

2

沒有理由爲此使用AJAX。最優雅，最簡單的方法是使用HTML表單標籤的onsubmit事件：

<form name="filler" method="post" action="display.php" onsubmit="return validateForm()"> 
    //form stuff 
</form>

這將調用JS功能validateForm提交表單前。如果功能validateForm返回false，表單將不會被提交。否則，它將像往常一樣提交到您的PHP文件。

編輯：

確保你在你的PHP驗證此輸入爲好，因爲Java腳本可以很容易地被禁用。

來源

2012-08-13 17:13:07

+0

+1正確，不需要jQuery，ajax等。7秒鐘打我:-) – jeroen 2012-08-13 17:15:54

+0

感謝這似乎完美 – 2012-08-14 12:18:24

+1

@Hendrik回覆你的帖子編輯，有可能做到這一點，但它會更整潔地返回一個主要的驗證功能，並使用其他主要功能。 – 2012-08-14 14:20:10

0

例如，如果您的窗體的名稱是「myForm的」，對於提交調用JavaScript代碼：

document.forms["myform"].submit();

來源

2012-08-13 17:10:13

0

沒有看到HTML的其餘部分，是的，無論JavaScript驗證如何，您的表單可能都會被提交。

，以避免最簡單的方法，是將onSubmit處理程序添加到表單：

<form name="filler" method="post" action="display.php" onSubmit="return my_validate_function();">

現在你的形式也不會，如果my_validate_function()返回false提交。

來源

2012-08-13 17:13:14 jeroen

0

將它寫入html文件原樣。

<?php 
if ($ID = '') { 
echo "<script language=javascript>alert('enter a valid username.')</script>"; 
} 
?>

來源

2012-08-13 17:38:25 user1568209

1

正如在其他的答案被提出，你可以添加一個事件偵聽器，表單和驗證的「客戶端」（即用JavaScript）。在它提交之前，這個JavaScript函數將被調用 - 從函數中你可以阻止表單提交（如果有問題的話）。

另外，如前所述，重要的是不要依賴客戶端驗證。用戶很容易禁用JavaScript，並且有許多合法的理由讓人們這樣做;不要將它視爲僅由人們「做不到」的事情。

但是，我不同意這裏介紹的方法。 「inline javascript」，就像在你的HTML標記中的javscript一樣，通常被認爲是不好的做法。在某些狹窄的情況下，它可能更合適，通常你最好從JavaScript附加事件的

這就是說，這裏是如何做到這一點的例子：

<form id="my_form" name="filler" method="post" action="display.php"> 
//form stuff 
</form>

..請注意，我添加了一個id屬性窗體...

var validate_form = function (evnt) { 
    var frm = evnt.target; 
    var error = false; 

    // validate here, if there is problem set error = true 
    alert('validating fields'); 


    if (error != false) { 
     evnt.preventDefault(); // stop the form from submitting 
     // show an error message 
     return; 
    }   
}; 
window.onload = function() { 
    var frm = document.getElementById('my_form'); 
    addEvent('submit', frm, validate_form); 
}; 
// quickie cross-browser addEvent 
var addEvent = function(event, target, method) { 
    if (target.addEventListener) { 
     target.addEventListener(event, method, false); 
    } else if (target.attachEvent) { 
     target.attachEvent("on" + event, method); 
    } 
}

這是爲什麼好？

這種方法對內聯javascript有幾個優點。首先，內聯JavaScript只允許每個元素有一個事件。如果您決定以後想要在表單中添加其他功能或功能，該怎麼辦？你可能不得不將功能破解成你的validate_form函數（壞），或者你必須改變爲這種方法（浪費時間沒有做到這一點）！其次，如果您決定稍後使用像jQuery這樣的框架，則更新此代碼的速度非常快（僅當您需要它時，纔會提供）。你可能會改變window.onload，你可以刪除addEvent函數。

原始問題呢？

你原來的問題是從JavaScript調用PHP函數。如前所述，AJAX是實現這一目標的方法。我將向您展示一個「香草」示例（不需要庫），並鏈接到一些使用jQuery等流行庫的示例。

首先，香草，請記住，這是很基本的，但可能是你所需要的：

function ajax(url, callback) { 
    var aj; 
    if (window.XMLHttpRequest) { 
     aj=new XMLHttpRequest(); 
    } else { 
     // remove this else if you don't care about IE6 (I DON'T!) 
     aj=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    aj.onreadystatechange=function() { 
     if (aj.readyState==4 && aj.status==200) { 
      callback(aj.responseText); 
     } 
    } 
    aj.open("GET",url,true); 
    aj.send(); 
    return aj; 
}

要使用它，需要ajax('http://myserver.org/myfile.php?value=1&anothervalue=2", callback_function);在myfile.php，你可以發佈數據的工作，然後輸出一個響應（對所有事情都說「1」沒問題，否則就是錯誤列表）。

要爲Ajax請求使用jQuery：

$.ajax({ 
    url: "http://myserver.org/myfile.php", 
    context: document.body 
}).done(function(response) { 
    // do something with the response 
});

請參閱該文檔：http://api.jquery.com/jQuery.ajax/

...或mootools：

var req = new Request({ 
    url: 'http://myserver.org/myfile.php', 
    onSuccess: function(txt){ 
     // do something with the result 
    }, 
    });

觀看演示：http://mootools.net/demos/?demo=Request

來源

2012-08-13 17:49:04

相關問題

 相關問題