jQuery AJAX提交表单并输出返回值

最新推荐文章于 2021-08-06 11:04:49 发布
最新推荐文章于 2021-08-06 11:04:49 发布
阅读量5.4k 收藏
点赞数
分类专栏： php web部署 文章标签： thinkphp jquery 表单 jquery ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/connora/article/details/46515379
版权

前端部分：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> </title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 </head>


 <body>
  <form id="form1">
  <p>Last name: <input type="text" name="name" /></p>
  <input id="btn"type="submit" value="Submit" />
</form>
<script src="//jquery-2.1.3.min.js"></script>
  <script>
  $(document).ready(function(){
<span style="white-space:pre">	</span>$("#btn").click(function() {
<span style="white-space:pre">		</span>var params=$("#form1").serialize();
<span style="white-space:pre">		</span>$.ajax({
   <span style="white-space:pre">			</span>type: "post",
<span style="white-space:pre">			</span>data:params,
<span style="white-space:pre">			</span>dataType:"json",//返回值类型，建议不要默认自行定义
<span style="white-space:pre">			</span>//dataType: "binary",
        <span style="white-space:pre">		</span>async: false,
<span style="white-space:pre">			</span>timeout: 30000,
        <span style="white-space:pre">		</span>url: 'http://localhost/TP/index.php/Admin/Conf/viewUser',
       <span style="white-space:pre">			</span>success: function(result){//result为接收返回值的参数名，可自行修改                
<span style="white-space:pre">			</span>var s = result.data;
<span style="white-space:pre">	</span>    <span style="white-space:pre">		</span>alert(s);
<span style="white-space:pre">		</span>},
<span style="white-space:pre">		</span>error: function(x, e) {
                 <span style="white-space:pre">	</span>// alert(x.readyState);
<span style="white-space:pre">			</span>alert(e);
                }
<span style="white-space:pre">		</span>});
<span style="white-space:pre">	</span>});
});  
  </script>
 </body>
</html>
此脚本将表单输入值序列化后传至后台，后台使用ThinkPHP框架，接收了POST方式传入的参数name，并将$_POST['name']的值以JSON格式打包后返回，前端已预先指定接收数据类型为JSON，并以result为返回值变量名称进行输出。

后台代码

<?php
namespace Admin\Controller;
use Think\Controller;

/**
 *
 * @author XFX
 *        user:add/change/delete,auth:add/change/delete
 */
class ConfController  extends Controller {
	
	public function Index() {
		$this->display('Template/Admin/Conf.html');
	}
	public function  viewUser() {
		//$var=$_POST;
		$data['data'] =$_POST['name'];
		$this->ajaxReturn($data);		
	}
	public function changeUser() {
		
	}
	public function delUser() {
		
	}
}

?>



connora
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery通过Ajax提交表单并返回结果
12-08
如下： 1：非Ajax 前台： 对应后台： 2：JQuery之Ajax 在介绍使用JQuery提交表单前，我们需要首先引用jquery.form.js，它来自于http://www.malsup.com/jquery/form/，至此，我们需要引用的JS文件有： 功能要求：Ajax提交表单，在控制器HelloWorld4Controller中处理请求，并返回若干数据，数据格式为JSON。 首先，我们假设返回的JSON实体为： 代码如下: public class LoginResultDTO { public bool Success { get; set; } public strin
jquery+ajax请求且带返回值的代码
10-23
- **数据验证**: 在用户提交表单之前，使用AJAX请求检查数据是否有效。 - **加载更多数据**: 例如，实现一个无尽滚动列表，当用户滚动到页面底部时，通过AJAX请求加载更多数据。 ### 注意事项 - 由于同步AJAX请求...
表单 ajax 三种返回,JQuery通过Ajax提交表单并返回结果
weixin_39521808的博客
08-06 516
如下：1：非Ajax前台：对应后台：2：JQuery之Ajax在介绍使用JQuery提交表单前，我们需要首先引用jquery.form.js，它来自于http://www.malsup.com/jquery/form/，至此，我们需要引用的JS文件有：功能要求：Ajax提交表单，在控制器HelloWorld4Controller中处理请求，并返回若干数据，数据格式为JSON。首先，我们假设返回的J...
js ajax提交表单和信息并返回值
wwppp987的博客
07-25 958
标准的内容： 4.php <html> <head> <title>jQuery Ajax 实例演示</title> <meta charset="utf-8" /> </head> <script src="...
jquery如何获取表单全部数据
weetch的博客
07-09 6040
Jquery 如何获取表单的全部数据，用于ajax提交 var formData = {}; var t = $('#Form').serializeArray(); $.each(t, function() { formData[this.name] = this.value; }); console.log(JSON.stringify(formData)); 说明：先获取内容，然后...
Jquery ajax 返回string类型加result.d原因
weixin_30275415的博客
01-06 75
啥叫异步,啥叫Ajax.咱不谈啥XMLHTTPRequest.通俗讲异步就是前台页面javascript能调用后台方法.这样就达到了无刷新.所谓的Ajax.这里我们讲二种方法 方法一:(微软有自带Ajax框架) 在Asp.net里微软有自己的Ajax框架.就是在页面后台.cs文件里引入 using System.Web.Services 空间 然后定义静态方法(方法前加上[WebMethod...
jquery ajax例子返回值详解
12-09
与$.get()的主要区别在于请求类型，POST方法通常用于提交表单数据或执行其他需要向服务器发送大量数据的操作。 3. **$.ajax()**： 这是最通用的AJAX函数，允许自定义更多选项。例如，你可以指定请求类型（type：...
from 表单提交返回值用post或者是get方法实现
09-05
在这个过程中，`jQuery` 提供了 `$.post` 和 `$.get` 两种方法来实现异步的 AJAX 表单提交，从而实现在不刷新整个页面的情况下获取服务器的返回值。 `$.post` 是 jQuery 中的一个 AJAX 函数，它使用 HTTP POST 请求...
纯javascript的ajax实现php异步提交表单的简单实例
10-22
根据给定文件的内容，本知识点将详细介绍如何使用纯JavaScript实现一个简单的PHP异步提交表单的Ajax实例。以下是详细的内容： ### Ajax技术基础 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个...
html表单提交后的返回结果,JQuery通过Ajax提交表单并返回结果
weixin_42470359的博客
06-23 404
如下：1：非Ajax前台：对应后台：2：JQuery之Ajax在介绍使用JQuery提交表单前，我们需要首先引用jquery.form.js，它来自于http://www.malsup.com/jquery/form/，至此，我们需要引用的JS文件有：功能要求：Ajax提交表单，在控制器HelloWorld4Controller中处理请求，并返回若干数据，数据格式为JSON。首先，我们假设返回的J...
Jquery 获取Form表单并返回Jason对象
小语一天
08-05 1480
一、uery方法中自带了一个序列化的方法： var formdata = $("#widget-search form").serializeArray(); 二、较上个方法略好些，如下： var jsonCondition = {}; // 拼接需要传输的参数 var formdata = $("#widget-search form").serializeArray(); $.ea...
ajax返回数据输出成表,javascript代码实例教程-ajax请求返回Json格式数据如何循环输出成table形式...
weixin_36429611的博客
08-06 848
小宝典致力于为广大程序猿(媛)提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 首先，Ajax请求数据，(用的是Jquery的Ajax)[javascript]$(function(){$('#test').click(function(){$.ajax({url:'__APP__/Article/jsonTest',type:'post',success:function(data){...
Jquery表单提交后获取返回Json值
weixin_30642029的博客
11-08 386
1.给form添加id值： <form action="/News/SaveMessage" method="post" accept-charset="utf-8" class="form" id="frm-reg" name="frm-reg"> 设置所有input标签的name属性值为数据库的字段值，即可以传值到后台 2.给提交按钮添加id值： <input cla...
jquery.ajax提交请求并返回json数据
zhujyy110的专栏
12-19 3450
当我们在两个java项目之间互相调用接口时就会遇到跨域请求的问题，这次我开发系统的注册功能后台实现是调用的用户管理中心的接口，前台通过$.ajax请求并处理返回的json数据，其中注意一点就是如果出现中文的时候最好是转码传输到后台解码，要不然容易出现乱码问题。 前台jsp页面的代码： [javascript] view plaincopy
ajax提交表单数据，并根据返回的数据进行相关处理的代码
码-窝
04-15 1061
ajax提交表单数据，并根据返回的数据进行相关处理的代码直接上代码<script type="text/javascript"> $(function(){ $("#sendtemp").click(function(){ $.ajax({ type:'POST', data:{ 'keyword1':$('
jQuery利用ajax调取json数据生成表格
work hard
03-03 4080
jQuery利用ajax调取json数据生成表格，并给每一行表格前面添加CheckBox复选框。实现全选，单选一行获取相应数据等操作。 1.添加复选框操作 2.全选 3.单选一行/取消一行时其他行不取消
ajax提交java表单_使用ajax提交form表单，包括ajax文件上传
最新发布
05-25
然后，通过jquery的ajax方法来提交表单数据，代码如下： ```javascript $(document).ready(function(){ $('#submitForm').click(function(){ var formData = new FormData($('#myForm')[0]); $.ajax({ url: '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值