【jQuery、Express.js】AJAX提交Form
HTML/CSS代码
构建onclick事件
- <div class = "row">
<div class = "col-md-10">
<input type="text" id="inputcpn" class="form-control" name="inputcpn">
</div>
<div class = "col-md-2">
<button type = "button" class="btn btn-green" onclick="nanshou()">Apply</button>
</div>
</div>
JavaScript代码(jQuery)
TYPE:请求类型,
URL:发送请求的地址,
DATA:发送到服务器的数据,
DATATYPE:预期服务器返回的数据类型,可以为xml、html、json、javascript、text等。
SUCCESS:请求成功后的回调函数。
进行AJAX请求,其中值得注意的地方是若数据格式为JSON,那么value属性必须为已经定义过的变量或者值(如果值为字符串,则使用双引号,JSON不支持单引号)。
- <script language="javascript" type="text/javascript">
- function nanshou(){
- var cpn= $('#inputcpn').val();
- var str= "" ;
- $('.productid').each(function(){
- str += $(this).html();
- str += ",";
- });
- str = str.substring(0, str.length - 1);
- var storeid= $('#currentstoreid').html();
- params = {inputcpn: cpn, products: str, storeid: storeid};
- $.ajax({
- type : "POST",
- url : "/product/applycoupons",
- data : params,
- dataType:'json',
- success:function(data)
- {
- if(data.result == "fail"){
- window.location="/product/checkout/cart/"+storeid+"/Invalid";
- }
- else{
- window.location="/product/checkout/cart/"+storeid+"/Applied";
- }
- }
- });
- }
- </script>
Express.js 代码(在route products.js 文件)
顺手写(编)了一个简单逻辑的回传给AJAX的if语句。
- var express = require('express');
- var app = express.Router();
- app.post(['/applycoupons'], function(req, res){
var products = req.body.products;- var storeid = req.body.storeid;
- var code = req.body.inputcpn;
- if (code == "") {
res.json({'result': 'fail'});
res.end();
return false;
}
else{
res.json({'result': 'success'});
res.end();
return false;
}
- });
【jQuery、Express.js】AJAX提交Form的更多相关文章
- Ajax提交form表单内容和文件(jQuery.form.js)
jQuery官网是这样介绍form.js A simple way to AJAX-ify any form on your page; with file upload and progress s ...
- 今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式
今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...
- jquery实现ajax提交form表单的方法总结
本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一: function AddHandlingFeeToRefund( ...
- jquery的ajax提交form表单方式总结
方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderServic ...
- jquery实现ajax提交form表单的方法总结(转)
方法一: 复制代码 代码如下: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement ...
- 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html
使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...
- ajax提交form表单
1. ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单. 2. from视图部分 <form id="loginF ...
- ajax提交form表单资料详细汇总
一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味 ...
- django ajax提交form表单数据
后台: from django.shortcuts import render from django.shortcuts import redirect from django.shortcuts ...
- ajax异步、同步问题,KindEditor ajax提交内容,ajax提交form表单 解决按两次的问题
版权声明:本文为博主原创文章,未经博主允许不得转载. 如果ajax不采用异步,整个js代码在服务器返回结果前都将阻塞,alert方法除外 lookUp('lookUp','',100,300,3); ...
随机推荐
- SQLServer 2008以上误操作数据库恢复方法
解决方法: 对于这类问题,主要是找回误操作之前的数据,在2008之前,有个很出名的工具Log Exploer,听说还挺好用的,这个网上大把教程,这里就不多说了.但是唯一遗憾的是,不支持20 ...
- 20190410Linux中磁盘管理及LVM(week2day1)
Linux磁盘管理及LVM讲解(week2_day2) 硬盘接口 从整体的角度上,硬盘接口分为IDE.SATA.SCSI和SAS四种,IDE接口硬盘多用于家用产品中,也部分应用于服务器,SCSI接 ...
- python class继承
https://blog.csdn.net/brucewong0516/article/details/79121179 类继承: class SubClassName(parentClass,[,p ...
- Hadoop2-HDFS学习笔记之入门(不含YARN及MR的调度功能)
架构 Hadoop整体由HDFS.YARN.MapReduce三大部分组成,推荐架构参考:https://www.cnblogs.com/zhjh256/p/10573684.html. 注:2.x的 ...
- Unix系统的启动
系统启动后: 第一个运行的进程是init 进程标识符为1. init派生一个getty.该进程负责打开终端端口,提供标准输入来源和标准输出.标准输出的去处,并且在屏幕上显示一个登录提示符 接下来执行/ ...
- 【JavaScript】标准日期、中国标准时间、时间戳、毫秒数互转
转载自:https://blog.csdn.net/IT429/article/details/78341847 看到的一篇比较有用的前端js时间转换方法,留个备份 首先要明确这三种格式是什么样子的: ...
- 为git关联编辑器(比如notepad++) Associating text editors with Git
Associating text editors with git Using Notepad++ as your editors you can set your default editor in ...
- jQuery Validate和Thymeleaf相关
jQuery Validate https://www.cnblogs.com/liuhongfeng/p/5135676.html https://www.cnblogs.com/linjiqin/ ...
- js中call()的用法
A.call(B,x,y) 1`改变函数A的this指向,使之指向B; 2` 把A函数放到B中运行,x和y是A函数的参数. //父类 Person function Person() { ...
- (转) Using the latest advancements in AI to predict stock market movements
Using the latest advancements in AI to predict stock market movements 2019-01-13 21:31:18 This blog ...