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的更多相关文章

  1. 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 ...

  2. 今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式

    今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...

  3. jquery实现ajax提交form表单的方法总结

    本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一:  function AddHandlingFeeToRefund( ...

  4. jquery的ajax提交form表单方式总结

    方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderServic ...

  5. jquery实现ajax提交form表单的方法总结(转)

    方法一: 复制代码 代码如下: function AddHandlingFeeToRefund() {            var AjaxURL= "../OrderManagement ...

  6. 使用ajax提交form表单,包括ajax文件上传 转http://www.cnblogs.com/zhuxiaojie/p/4783939.html

    使用ajax提交form表单,包括ajax文件上传 前言 使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){ ... },&qu ...

  7. ajax提交form表单

    1. ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单. 2. from视图部分 <form id="loginF ...

  8. ajax提交form表单资料详细汇总

    一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味 ...

  9. django ajax提交form表单数据

    后台: from django.shortcuts import render from django.shortcuts import redirect from django.shortcuts ...

  10. ajax异步、同步问题,KindEditor ajax提交内容,ajax提交form表单 解决按两次的问题

    版权声明:本文为博主原创文章,未经博主允许不得转载. 如果ajax不采用异步,整个js代码在服务器返回结果前都将阻塞,alert方法除外 lookUp('lookUp','',100,300,3); ...

随机推荐

  1. FileOutputSream文件字节输出流

    1.FileOutputSream文件字节输出流:  输入--写出--使用:  输出--写入--存储: 写出写入是对硬盘而言: 其中,OutputStream为所有类型的字节输出流的超类: FileO ...

  2. 2018-2019-2 《网络对抗技术》Exp2 后门原理与实践

    2018-2019-2 <网络对抗技术>Exp2 后门原理与实践 1. 后门原理与实践实验说明及预备知识 一.实验说明 任务一:使用netcat获取主机操作Shell,cron启动 (0. ...

  3. PostgreSql之在group by查询下拼接列字符串

    首先创建group_concat聚集函数: CREATE AGGREGATE group_concat(anyelement) ( sfunc = array_append, -- 每行的操作函数,将 ...

  4. Linux开局配置注意事项

    1.修改ssh配置文件远程端口号,防止攻击 sed    -ri   's/“#Port 22”/“Port 10086”/g‘    /etc/ssh/sshd_config 2.修改ssh配置文件 ...

  5. [dart学习]第四篇:函数和操作符(本篇未完待续)

    接着学习dart的函数和操作符. 1.函数Function dart是一种真正的面向对象的语言,通常一个函数也是Function类型的对象,这也就是说可以把函数赋值给一个变量,或者作为另一个函数的入参 ...

  6. react小知识点

    1.render函数什么时候会执行? 当this.state/this.props发生改变的时候render函数就会执行 2.组件第一次执行的时候会执行哪些生命周期 constructor--> ...

  7. 2.2JAVA基础复习——JAVA语言的基础组成运算符和语句

    JAVA语言的基础组成有: 1.关键字:被赋予特殊含义的单词. 2.标识符:用来标识的符号. 3.注释:用来注释说明程序的文字. 4.常量和变量:内存存储区域的表示. 5.运算符:程序中用来运算的符号 ...

  8. mtd-utils交叉编译安装

    一.获取源码并解压 存储于/home/zhangyi/work/psoc_ltp/tools-ltp-ddt中,解压后的源码存于上一层目录. 1.mtd-utils-2.0.0 wget ftp:// ...

  9. 浅析贝叶斯神经网络(Based on Variational Bayesian)

    https://blog.csdn.net/qq_20195745/article/details/82453589 贝叶斯神经网络简介 对于一个神经网络来说,最为核心的是如何根据训练集的数据,得到各 ...

  10. ElasticSearch(十二)删除数据插件delete-by-query

    在ElasticSearch2.0之后的版本中没有默认的delete-by-query,想使用此命令需要安装这个插件. 首先需要进入ES的目录 [root@node122 elasticsearch] ...