Question

作为一个新手，我想构建一个包含几个输入字段的表单，并能够在不同的页面中重用它。如何使用Javascript / jQuery对象构建它并能够重用它？

让我们调用CustomerForm对象，并调用一个函数CustomerForm.submitInformation（）。我不知道语法/结构是什么样的？我熟悉jQuery / Javascript但我之前没有构建过Javascript对象。如何向服务器发送AJAX帖子或JSONP帖子？对于AJAX和JSONP，你如何以不同的方式构建它？

我们假设表格如下：

<form>
  <input type="text" name="name" value="foo" />
  <input type="text" name="email" value="foo@moo.com" />
  <textarea name="comment">Whatever</textarea>
</form>

如何使用AJAX和/或JSONP提交此表单？创建表单对象需要做什么，如何在各种页面中使用它？

所以，基于尼古拉斯的帮助，我更接近于获得这个的要点。我创建了一个Customer对象，

在formload.js

Customer = {name: "", email: "", submitInformation: function(){
    var form = '<form name="input" action="submit_action.php" method="get">';
var label1 = '<label>Your&nbsp;Label:&nbsp;</label>';
var input1 = '<input type="text" name="name" value="foo" />';
var label2 = '<label>Your&nbsp;Second&nbsp;Label:&nbsp;</label>';
var input2 = '<input type="text" name="email" value="foo@moo.com" />';
var sub = '<input type="submit" value="Submit">';
var killform = '</form>';
var br = '<br />';

$('body').append(form + label1+input1 + br + label2+input2 + br + sub + killform);

}}

在HTML视图中，customer.html

$(document).ready(){
    var customer1 = new Customer();
    customer1.username = customer1.input1.val();
    customer1.email = customer1.input2.val();
    customer1.getInformation();
}

这是对的吗？

Answer 1

我想你可以只是通过jQuery写它，但这真的不是最好的解决方案。如果您正在修改HTML页面，那么您应该使用PHP包含相应文档的include来覆盖您的表单，或者使用某种CMS系统（Wordpress？ Joomla？）导入和重用文件。

当然，你提出了这个问题，所以你能做到的一种方式就是这样：

将submit_action.php文件存储在同一domain上，以避免CORS问题。
只需使用append向HTML写一个硬编码的jQuery。

示例 http://jsfiddle.net/nAQ3C/2/

$(function() { $('body').append('<form name="input" action="submit_action.php" method="get"><label>Your Label: </label><input type="text" name="name" value="foo" /><br /><label>Your Second Label: </label><input type="text" name="email" value="foo@moo.com" /><br /><input type="submit" value="Submit"></form>'); }); /* Then just write your submission request with PHP, ASP, or whatever other service you'd like to use and upload that file as well */

*请注意，DOM操作是可行的，但应尽量减少，因为client对浏览器本身的压力要大得多。

编辑：

要重复使用此功能，您必须将其另存为外部js文件，然后将其加载到head个html页中，如下所示：

<head> <script src="js/formload.js"></script> </head>

为了便于阅读，我稍微扩展了一下：

http://jsfiddle.net/nAQ3C/3/

formload.js等于：

$(function() { var form = '<form name="input" action="submit_action.php" method="get">'; var label1 = '<label>Your Label: </label>'; var input1 = '<input type="text" name="name" value="foo" />'; var label2 = '<label>Your Second Label: </label>'; var input2 = '<input type="text" name="email" value="foo@moo.com" />'; var sub = '<input type="submit" value="Submit">'; var killform = '</form>'; var br = '<br />'; $('body').append(form + label1+input1 + br + label2+input2 + br + sub + killform); });

如何在Javascript中构建可重用的表单？

1 个答案:

编辑：