本文介绍了我如何自动而无需刷新页面提交此表?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

这是所有的PHP文件

 <!DOCTYPE HTML PUBLIC -  // W3C // DTD XHTML 1.0过渡// ENhttp://www.w3.org/TR/xhtml1/DTD/ XHTML1-transitional.dtd>
< HTML>
< HEAD>
    <冠军> JQuery的形式例< /标题>
    <脚本类型=文/ JavaScript的SRC =HTTP://$c$c.jquery.com/jquery-1.4.2.min.js>< / SCRIPT><  - 需要的! jQuery的中至少有一个实例 - >
    &LT;脚本类型=文/ JavaScript的 src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script><!--ajax使用jQuery使用 - &GT;
    &LT;脚本类型=文/ JavaScript的&GT;
    $(文件)。就绪(函数(){//当文件已加载
        $(#的MyForm)验证({//问:什么是验证?MyForm的得到确认
            调试:假的,
            规则:{
                名称:必需的,//姓名和电子邮件是传递的唯一的东西
                电子邮件: {
                    要求:真实,
                    电子邮件:真//我想这将输入定义为一个电子邮件
                }
            },
            消息:{//在什么时候出现这一消息?
                名称:请让我们知道你是谁。
                电子邮件:一个有效的电子邮件将帮助我们与您联系。
            },
            submitHandler:功能(形式){//提交表单
                //做其他的东西对于一个有效形式
                。.post的$('process.php',$(#的MyForm)序列化(),功能(数据){//问:什么是序列化的MyForm被序列化和分配的行动?
                    $('#结果)HTML(数据); //这是什么?
                });
            }
        });
    });

    在window.onload =功能()
    {
    }


    &LT; / SCRIPT&GT;
    &LT;风格&GT;
    label.error {宽度:250像素;显示:内联;颜色:红色;}
    &LT; /风格&GT;
&LT; /头&GT;
&LT;身体GT;

&LT;表格名称=MyForm的ID =MyForm的行动=的方法=POST&GT;
&LT;! - 该名称的表单字段 - &GT;
    &LT;标签=名称ID =name_label&GT;名称&LT; /标签&gt;
    &LT;输入类型=文本名称=名称ID =名字大小=30值=查理/&GT;
    &LT; BR&GT;
&LT;! - 邮件表单字段 - &GT;
    &LT;标签=电子邮件ID =email_label&GT;电子邮件&LT; /标签&gt;
    &LT;输入类型=文本名称=电子邮件ID =电子邮件大小=30值=obesemuleaccount@yahoo.com/&GT;
    &LT; BR&GT;
&LT;! - 提交按钮 - &GT;
    &LT;输入类型=提交名称=提交值=提交&GT;
&LT; /形式GT;
&LT;! - 我们将输出process.php结果在这里 - &GT;
&LT; D​​IV ID =结果 -  GT;&LT; D​​IV&GT;
&LT; /身体GT;
&LT; / HTML&GT;

&LT;  - !好了,我想先尝试一些东西出来,以获得感受的形式如何工作 - &GT;
&LT;! - 上传的形式向现场的地方 - &GT;
&LT;! - 访问和玩它 - &GT;
&LT;! - 然后找出如何提交给多个PHP形式 ​​- &GT;
 

所以我使用jQuery和Ajax,我需要自动提交表单。

我已经使用像document.myform.submit尝试过,但似乎并没有工作。这时候我不使用AJAX,但导致页面刷新到PHP文件的目标工作。

我想我只是缺少一些语法。我做了搜索,发现了几个线程像这样的: Ajax的自动表单提交

不过,我是一个业余爱好者设计的,所以我真的不明白他们在说什么。我不会把我的固定code别人的任务,但我pretty的一定的变化较小,而我已经了一段时间试图弄清楚这一点。非常感谢任何帮助!请在你的方向非常详细,这将会是最好的,其实,如果你能在$ C $直接提供修补程序C本身。

编辑:请不要笑得太辛苦,在我的意见,我明白了code(经过多次使用Google)现在好多了,这是从几个小时前修订

双击编辑:这里有一个名为process.php示例PHP脚本,你需要编辑它,看看是否自动提交作品虽然。正如上面提到的,你可以用一个MySQL数据库做到这一点。

 打印成功提交形式:其中; BR&GT;您的名字为&lt; B&gt;中。$ _ POST ['名称']&LT; / B&gt;和电子邮件为&lt ; B&GT;&LT$ _ POST [电子邮件]。; / B&GT;&LT; BR&gt;中;
 

解决方案

有关最小的努力,我认为这会工作

 &LT;脚本&GT;

$(文件)。就绪(函数(){
        提交表格();
});

功能submit_form(){
    .post的$('process.php',$(#MyForm的)。序列化(),功能(数据){
        $('#结果)HTML(数据);
    });
}

&LT; / SCRIPT&GT;
 

问:什么是验证?MyForm的被验证

A:使用validate方法,它可以确保在表单提交前的字段中的数据是有效的。

问:在什么时候出现这一消息

答:当验证未通过。例如您指定的名称为需要和电子邮件必须是一个电子邮件前面的几行。

问:什么是序列化? MyForm的被序列化并分配一个动作

一个:序列读取所有的表单字段的值,构建适合GET和POST查询字符串。在你的情况,序列化之后,POST数据将被命名=查理和放大器; email=obesemuleaccount@yahoo.com

问:这是什么

答:数据作为参数传递给回调函数。在这种情况下,process.php的输出将被写入的#的innerHTML('#结果')

This is all in a php file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>JQuery Form Example</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script><!--need at least one instance of jquery-->
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script><!--ajax to use with jquery-->
    <script type="text/javascript">
    $(document).ready(function(){//when the document has loaded
        $("#myform").validate({//Q: what is validate?, myform gets validated
            debug: false,
            rules: {
                name: "required",//name and email are the only things passed
                email: {
                    required: true,
                    email: true//I guess this defines the input as an email
                }
            },
            messages: {//at what point is this message displayed?
                name: "Please let us know who you are.",
                email: "A valid email will help us get in touch with you.",
            },
            submitHandler: function(form) {//submit the form
                // do other stuff for a valid form
                $.post('process.php', $("#myform").serialize(), function(data) {//Q:what is serialization? myform gets serialized and assigned an action
                    $('#results').html(data);//what is this?
                });
            }
        });
    });

    window.onload=function( )
    {
    }


    </script>
    <style>
    label.error { width: 250px; display: inline; color: red;}
    </style>
</head>
<body>

<form name="myform" id="myform" action="" method="POST">
<!-- The Name form field -->
    <label for="name" id="name_label">Name</label>
    <input type="text" name="name" id="name" size="30" value="Charlie"/>
    <br>
<!-- The Email form field -->
    <label for="email" id="email_label">Email</label>
    <input type="text" name="email" id="email" size="30" value="obesemuleaccount@yahoo.com"/>
    <br>
<!-- The Submit button -->
    <input type="submit" name="submit" value="Submit">
</form>
<!-- We will output the results from process.php here -->
<div id="results"><div>
</body>
</html>

<!--ok, so I want to first try some stuff out to get a feel for how the form works-->
<!--upload the form to the site somewhere-->
<!--access and play around with it-->
<!--then figure out how to submit to multiple php forms-->

So I'm using Jquery and Ajax, and I need to submit the form automatically.

I've tried using things like document.myform.submit, but that doesn't seem to work. It works when I am not using ajax, but that causes the page to refresh to the target of the php file.

I think I'm just missing some syntax. I did a search and found a few threads like this one:Ajax auto form submit

But I'm more of a hobbyist designer, so I don't really understand what they are saying. I wouldn't put the task of fixing my code on others, but I'm pretty sure the change is minor, and I've been up a while trying to figure this out. Many thanks to anyone that helps! Please be very detailed in your directions, it'd be best in fact if you could provide the fix directly in the code itself.

edit: please don't laugh too hard at my comments, I understand the code (after much googling) much better now, that was a revision from a few hours ago.

double edit: here's a sample php script called process.php, you will need to edit it to see if the autosubmit works though. As mentioned above, you can do this with a MySQL database.

print "Form submitted successfully: <br>Your name is <b>".$_POST['name']."</b> and your email is <b>".$_POST['email']."</b><br>";
解决方案

For minimal effort I think this will work

<script>

$(document).ready(function(){
        submit_form();
});

function submit_form () {
    $.post('process.php', $("#myform").serialize(), function(data) {
        $('#results').html(data);
    });
}

</script>

Q: what is validate?, myform gets validated

A: Using the validate method, it ensures that the data in the fields are valid before the form is submitted.

Q: at what point is this message displayed?

A: When the validation does not pass. For example you specified the name to be "required" and the email must be an "email" a few lines earlier.

Q: what is serialization? myform gets serialized and assigned an action

A: Serialize reads the value of all the fields in the form and constructs the query string suitable for GET and POST. In your case, after serialization, the POST data will be name=Charlie&email=obesemuleaccount@yahoo.com"

Q: what is this?

A: "data" is passed as a parameter to the callback function. In this case, the output of process.php will be written into the innerHTML of #('#results')

这篇关于我如何自动而无需刷新页面提交此表?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-24 19:05
查看更多