主页

ajax 提交表单数据各位大侠帮忙，在线等。。

yaoxuemin 2010-07-08 04:29:55

我想要实现的用ajax 提交表单数据，如下：
$.ajax({
type: "POST", //提交方式
url: "manage/administrator/get_systemval", // 提交路径
data: "name=John&location=Boston",
// 参数问题出现在这里，因为我的表单元素的每个值都要传到控制器中去处理，我不想将表单的值一个个的取出来传过去，我想要实现类似于我们点击 submit 按钮在表单中用action 提交路径表单元素命名我用的格式统一为： form['xxx'] 然后在后台接的时候我用一句$this-> input -> post('form'); 就可以将表单的值全部接过来！现在想使用 ajax方式去实现！

success: function(msg){
alert( "Data Saved: " + msg );
}
});

请各位大侠帮忙！！

...全文

21 条回复

切换为时间正序

请发表友善的回复…

发表回复

helloyou0 2010-07-08

jquery核心部分就有serialize(),

http://api.jquery.com/serialize/

回复赞

床上等您 2010-07-08

不错的 formSerialize 。。。。jq

回复赞

jungle_java 2010-07-08

强烈支持该贴，其实自己的项目中获取页面上信息的方式就是楼主所问的，可惜我每天只知道$this->data['xxx']，即页面上的信息都保存到data数组中去的。明天一定要看明白到底是怎么实现的！也希望这里的高手们能解决这个问题！呵呵，关注ing！

回复赞

liangpei2008 2010-07-08

嗯，prototype\jquery都可以用formSerialize来序列化表单项，而后用ajax提交！
当然，也可以自定义一个函数来循环表单项

回复赞

amani11 2010-07-08



//jquery果然效率高，，，，，我前面贴的有点问题，再献丑一次吧,个人测试通过

function encodeFormData(formElement) { //formElement == $('#XXX');

  var whereClause = ""; 

  var and = "";

  for ( i = 0 ; i < formElement.length ; i++ ) { 

    var element = formElement[i];

	alert(i);

    if ( element.name != "" ) { 

      if (element.type=='select-one') { 

        element_value = element.options[element.selectedIndex].value; 

      } else if ( element.type == 'checkbox' || element.type == 'radio' ) { 

        if ( element.checked == false ) { 

          continue;    

        } 

        element_value = element.value; 

      } else {

        element_value = element.value; 

      } 

      whereClause += and + 'form[' + element.name + ']=' + element_value.replace(/\&/g,"%26"); 

      and = "&" 

    } 

  } 

  return whereClause; 

}

回复赞

foolbirdflyfirst 2010-07-08

我用extjs,

new Ext.Ajax.request({

  form : 'form id值'

 ,upload : true

})

就可以构造个POST带文件上传的ajax请求，相信jquery也有相应办法。用了框架还自己写感觉有点傻，虽然原理都差不多。

回复赞

foolbirdflyfirst 2010-07-08

类似这样

<form name="frm" id="frm">

  <input type="text" name='key1' value="val1"/>

  <input type="text" name='key2' value="val2"/>

  <input type="text" name='key3' value="val3"/>

  <input type="text" name='key4' value="val4"/>

 

</form>

<script>

  var of = document.getElementById('frm')

     ,ip = of.elements

     ,postdata = []

  for(var i=0,j=ip.length;i<j;i++){

  	postdata[postdata.length] = ip[i].name + '=' + ip[i].value;

  }

  alert(postdata.join('&'));

</script>

回复赞

xuzuning 2010-07-08

jquery ???

<script type="text/javascript" src="http://malsup.com/jquery/form/jquery.form.js"></script>

<script type="text/javascript">
$(document).ready(function(){
var url = 'ajax_server.php';

//ajax的post提交
$.post(url,
{ data: $("#form1").formSerialize()},
function(data){
alert(data); //debug:data即为处理结果
});

});
</script>

回复赞

amani11 2010-07-08





//自己拼装了，就是数组接收值吧？？？不过jquery.form.js也不错



function encodeFormData(formElement) { //formElement == $('#XXX');

  var whereClause = ""; 

  var and = ""; 

  for ( i = 0 ; i < formElement.length ; i++ ) { 

    var element = formElement[i]; 

    if ( element.name != "" ) { 

      if (element.type=='select-one') { 

        element_value = element.options[element.selectedIndex].value; 

      } else if ( element.type == 'checkbox' || element.type == 'radio' ) { 

        if ( element.checked == false ) { 

          break;    

        } 

        element_value = trim(element.value); 

      } else { 

        element_value = trim(element.value); 

      } 

      whereClause += and + 'form[' + trim(element.name) + ']=' + element_value.replace(/\&/g,"%26"); 

      and = "&" 

    } 

  } 

  return whereClause; 

}

回复赞

yaoxuemin 2010-07-08

[Quote=引用 10 楼 foolbirdflyfirst 的回复:]

用form控件只不过是方便了操作，协议还是http协议,ajax发送的data属性应该就是http request body.
你完全可以写个js函数把form控件的name,value串起来作为发送参数发送过去啊。
[/Quote]

不是很明白！能麻烦你举个例子说明吗？谢谢了！

回复赞

woshiguozhongbin 2010-07-08

如果你不用插件...一个页面十几个文本框都经的你去写data了...

回复赞

foolbirdflyfirst 2010-07-08

用form控件只不过是方便了操作，协议还是http协议,ajax发送的data属性应该就是http request body.
你完全可以写个js函数把form控件的name,value串起来作为发送参数发送过去啊。

回复赞

yaoxuemin 2010-07-08

[Quote=引用 6 楼 icemoist 的回复:]

引用 4 楼 woshiguozhongbin 的回复:
用form插件...

有必要吗，小题大做
[/Quote]

呵呵！那你认为我这个小题要怎么解决呢！其实现在我都已经用纯表单提交实现了！但是在处理控制器中的返回值时有一些问题！不好处理,所以想要寻找另外的方法

回复赞

woshiguozhongbin 2010-07-08

http://www.wwoon.com/?aid=80

你可以看看...

回复赞

yaoxuemin 2010-07-08

[Quote=引用 4 楼 woshiguozhongbin 的回复:]

用form插件...
[/Quote]

能具体点吗？没用过！请指教！

回复赞