【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); ...
随机推荐
- python __str__() 和 __repr__()是干啥的
1. 没定义__str__() print的时候得不到自己想要的东西 类默认转化的字符串基本没有我们想要的一些东西,仅仅包含了类的名称以及实例的 ID (理解为 Python 对象的内存地址即可).虽 ...
- 浅谈USB驱动架构 转载
去年,老师让我分析基于HD3系统芯片的WindowsCE USB驱动的可行性.USB驱动非常庞大,多个软件层次相互交错,以及各种协议,USB系统对于一般人很难理解,我对其也只是理解一个大概,下面,我对 ...
- JDK8到JDK12各个版本的重要特性整理
JDK8新特性 1.Lambda表达式 2.函数式编程 3.接口可以添加默认方法和静态方法,也就是定义不需要实现类实现的方法 4.方法引用 5.重复注解,同一个注解可以使用多次 6.引入Optiona ...
- Restful levels and Hateoas
RESTful: Rest是一种软件架构风格.设计风格,而不是标准,只是提供了一组设计原则和约束条件.它主要用于客户端和服务器交互类的软件.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等 ...
- 本地访问虚拟机redis
1.开放端口号6379 iptables –I INPUT –p tcp –-dport 6379 –j ACCEPT 2.修改redis.conf 配置文件 ①修改redis绑定IP为虚拟机IP地址 ...
- Android系统分析之运营商显示流程分析之运营商信息的读取流程二
运营商显示流程分析之运营商信息的读取流程 一. SIM卡运营商信息的读取 从前面的 运营商信息的获取和赋值 可以知道SIM卡运营商的赋值最终是在 SIMRecords 中完成的, 而SIM卡信息的相关 ...
- Android中获得网络状况的实现
要得知网络状况就是要用networkinfo类这个类名还是把这个类的意思表达的很清晰的,network是网络,info是状况.判断是否有网用到了这个类的IsAvailable方法,这个方法返回的是这个 ...
- 20175312 2018-2019-2 实验一《Java开发环境的熟悉》实验报告
20175312 2018-2019-2 实验一<Java开发环境的熟悉>实验报告 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试J ...
- 使用ODP.NET连接Oracle数据库
项目需要和第三方进行对接,奇葩的是地方没给提供接口,却提供了一个Oracle的视图 所以有了C#访问Oracle数据库的需求 1.打开nuget,安装驱动 https://www.nuget.org/ ...
- nodejs的jekins部署
第一步 gitlab项目仓库给jekins服务器分配一个账号develop权限用于拉取代码. 分支为master. 第二步 jekins配置打包脚本. npm install --registry=h ...