-2

可能重复：
[PHP/JavaScript]：通过带有参数的 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>
4

7 回答 7

2

没有理由为此使用 AJAX。最优雅和最简单的方法是使用 HTML 表单标签的onsubmit事件：

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

validateForm这将在提交表单之前调用 JS 函数。如果函数validateForm返回false，则不会提交表单。否则它将像往常一样提交到您的 PHP 文件。

编辑：

确保您也在 PHP 中验证此输入，因为 Javascript 很容易被禁用。

于 2012-08-13T17:13:07.503 回答
1

正如其他答案中所建议的那样，您可以在表单中添加一个事件侦听器并在“客户端”（即使用 javascript）上进行验证。在它提交之前，这个javascript函数将被调用——你可以从这个函数中阻止表单提交（如果有问题的话）。

此外，如前所述，重要的是不要依赖客户端验证。用户禁用 javascript 非常容易，人们这样做有很多正当理由；不要将其视为只有“没有好处”的人才能完成的事情。

但是，我不同意这里提出的方法。“内联 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);In myfile.php，您可以使用发布的数据，然后输出响应（说“1”表示一切正常，否则会出现错误列表）。

将jQuery用于 ajax 请求：

$.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-13T17:49:04.023 回答
0

For example, if the name of your form is ‘myform’, the JavaScript code for the submit call is:

document.forms["myform"].submit();
于 2012-08-13T17:10:13.087 回答
0

It's AJAX that you want.

This Bassistance jQuery validation plugin will be something to start with. Here are some demos.

于 2012-08-13T17:11:34.930 回答
0

在没有看到 html 的其余部分的情况下，是的，无论 javascript 验证如何，您的表单都可能被提交。

避免这种情况的最简单方法是onSubmit在表单中添加一个处理程序：

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

my_validate_function()现在，如果返回 false，您的表单将不会提交。

于 2012-08-13T17:13:14.977 回答
0

按原样将其写入 html 文件。

<?php
if ($ID = '') {
echo "<script language=javascript>alert('enter a valid username.')</script>";
}
?>
于 2012-08-13T17:38:25.327 回答
-1

您应该使用 JQuery 或类似的东西。查看http://api.jquery.com/jQuery.ajax/和http://api.jquery.com/serialize/。

于 2012-08-13T17:13:20.283 回答