使用jquery ajax json发送表单数据

编程入门 行业动态 更新时间:2024-10-11 01:21:18
本文介绍了使用jquery ajax json发送表单数据的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

我是PHP / jquery的新手我想问一下如何使用json格式的ajax从表单字段(名称,年龄等)发送json数据。可悲的是,我找不到任何相关的信息,甚至可以动态地做到这一点? Google搜索仅返回手动构建数据等答案。喜欢:名称:XY ,年龄:32 ,依此类推。

I'm new in PHP/jquery I would like to ask how to send json data from a form field like (name, age, etc) with ajax in a json format. Sadly I can't found any relevant information about this it's even possible to do it dynamically? Google searches only gives back answers like build up the data manually. like: name: X Y, age: 32, and so on.

有没有这样做?

感谢您的帮助!

编辑:

<form action="test.php" method="post"> Name: <input type="text" name="name"><br> Age: <input type="text" name="email"><br> FavColor: <input type="text" name="favc"><br> <input type="submit"> </form>

推荐答案

这里有一个简单的

这里是我的test.php仅用于测试

here is my test.php for testing only

<?php // this is just a test //send back to the ajax request the request echo json_encode($_POST);

这是我的index.html

here is my index.html

<!DOCTYPE html> <html> <head> </head> <body> <form id="form" action="" method="post"> Name: <input type="text" name="name"><br> Age: <input type="text" name="email"><br> FavColor: <input type="text" name="favc"><br> <input id="submit" type="button" name="submit" value="submit"> </form> <script src="ajax.googleapis/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> $(document).ready(function(){ // click on button submit $("#submit").on('click', function(){ // send ajax $.ajax({ url: 'test.php', // url where to submit the request type : "POST", // type of action POST || GET dataType : 'json', // data type data : $("#form").serialize(), // post data || get data success : function(result) { // you can see the result from the console // tab of the developer tools console.log(result); }, error: function(xhr, resp, text) { console.log(xhr, resp, text); } }) }); }); </script> </body> </html>

两个文件都放在同一目录中

Both file are place in the same directory

更多推荐

使用jquery ajax json发送表单数据

本文发布于:2023-10-12 05:07:48,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1483799.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:表单   数据   jquery   ajax   json

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!