怎么把HTML里的元素和JSP里的绑定，做支付功能

qq_37878669 2018-01-22 07:53:56
HTML
-----------------------------
<!DOCTYPE html>
<html lang="en" class="no-js">
<head lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>母婴用品商城</title>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="shoppingCart/style.css">
<link rel="stylesheet" type="text/css" href="css/basic.css">
<link rel="stylesheet" type="text/css" href="css/column.css">
<body>

<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">母婴商城</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="babyUsing.html">宝宝用品</a></li>
<li><a href="paperDiaper.html">纸尿裤</a></li>
<li class="active"><a href="babyFood.html">宝宝食品</a></li>
<li><a href="dailyUse.html">生活用品</a></li>
<li><a href="healthCare.html">食品保健</a></li>
</ul>
</div>
</div>
</nav>

<div class="ct-pageWrapper">
<main>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="widget">
<h2 class="widget-header">购物车</h2>
<div class="ct-cart"></div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-sm-4">
<div class="ct-product">
<div class="image"><img src="img/food1.jpg" alt=""></div>
<div class="inner"><a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a>
<h2 class="ct-product-title">荷兰奶粉</h2>
<p class="ct-product-description">荷兰牛栏Nutrilon婴幼儿奶粉1段</p><span class="ct-product-price">Y156</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="ct-product">
<div class="image"><img src="img/food2.jpg" alt=""></div>
<div class="inner"><a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a>
<h2 class="ct-product-title">美素佳儿奶粉</h2>
<p class="ct-product-description">美素佳儿较大婴儿配方奶粉2段900g适用于6-12个月</p><span class="ct-product-price">Y199</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="ct-product">
<div class="image"><img src="img/food3.jpg" alt=""></div>
<div class="inner"><a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a>
<h2 class="ct-product-title">惠氏金装奶粉</h2>
<p class="ct-product-description">惠氏金装幼儿乐婴儿宝宝3段奶粉1200g克盒装12-36个月三联包</p><span class="ct-product-price">Y151.40</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="ct-product">
<div class="image"><img src="img/food4.jpg" alt=""></div>
<div class="inner"><a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a>
<h2 class="ct-product-title">雅培奶粉</h2>
<p class="ct-product-description">雅培3段亲体婴幼儿配方奶粉金装喜康力婴儿牛奶粉三段1200g盒装</p><span class="ct-product-price">Y159</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="ct-product">
<div class="image"><img src="img/food5.jpg" alt=""></div>
<div class="inner"><a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a>
<h2 class="ct-product-title">君乐宝奶粉</h2>
<p class="ct-product-description">君乐宝纯金装2段四联包较大婴儿奶粉 6-12个月 1600g</p><span class="ct-product-price">Y99</span>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="ct-product">
<div class="image"><img src="img/food6.jpg" alt=""></div>
<div class="inner"><a href="#" class="btn btn-motive ct-product-button"><i class="fa fa-shopping-cart"></i></a>
<h2 class="ct-product-title">贝因美奶粉</h2>
<p class="ct-product-description">贝因美金装爱+较大婴儿配方牛奶粉2段6-12个月1000g</p><span class="ct-product-price">Y189</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>

<script src="bootstrap-3.3.7-dist/js/jquery.min.js"></script>
<script src="jQuery/shop.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script>
$('body').ctshop({
currency: '$',
paypal: {
currency_code: 'EUR'
}
});
</script>
</div>



</body>
</html>

-------------------------------JSP-----------------------
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="com.alipay.config.AlipayConfig" %>
<%@page import="com.alipay.api.AlipayClient"%>
<%@page import="com.alipay.api.DefaultAlipayClient"%>
<%@page import="com.alipay.api.AlipayApiException"%>
<%@page import="com.alipay.api.response.AlipayTradeWapPayResponse"%>
<%@page import="com.alipay.api.request.AlipayTradeWapPayRequest"%>
<%@page import="com.alipay.api.domain.AlipayTradeWapPayModel" %>
<%@page import="com.alipay.api.domain.AlipayTradeCreateModel"%>
<%

%>
<%
if(request.getParameter("WIDout_trade_no")!=null){
// 商户订单号，商户网站订单系统中唯一订单号，必填
String out_trade_no = new String(request.getParameter("WIDout_trade_no").getBytes("ISO-8859-1"),"UTF-8");
// 订单名称，必填
String subject = new String(request.getParameter("WIDsubject").getBytes("ISO-8859-1"),"UTF-8");
System.out.println(subject);
// 付款金额，必填
String total_amount=new String(request.getParameter("WIDtotal_amount").getBytes("ISO-8859-1"),"UTF-8");
// 商品描述，可空
String body = new String(request.getParameter("WIDbody").getBytes("ISO-8859-1"),"UTF-8");
// 超时时间 可空
String timeout_express="2m";
// 销售产品码 必填
String product_code="QUICK_WAP_WAY";
/**********************/
// SDK 公共请求类，包含公共请求参数，以及封装了签名与验签，开发者无需关注签名与验签
//调用RSA签名方式
AlipayClient client = new DefaultAlipayClient(AlipayConfig.URL, AlipayConfig.APPID, AlipayConfig.RSA_PRIVATE_KEY, AlipayConfig.FORMAT, AlipayConfig.CHARSET, AlipayConfig.ALIPAY_PUBLIC_KEY,AlipayConfig.SIGNTYPE);
AlipayTradeWapPayRequest alipay_request=new AlipayTradeWapPayRequest();

// 封装请求支付信息
AlipayTradeWapPayModel model=new AlipayTradeWapPayModel();
model.setOutTradeNo(out_trade_no);
model.setSubject(subject);
model.setTotalAmount(total_amount);
model.setBody(body);
model.setTimeoutExpress(timeout_express);
model.setProductCode(product_code);
alipay_request.setBizModel(model);
// 设置异步通知地址
alipay_request.setNotifyUrl(AlipayConfig.notify_url);
// 设置同步地址
alipay_request.setReturnUrl(AlipayConfig.return_url);

// form表单生产
String form = "";
try {
// 调用SDK生成表单
form = client.pageExecute(alipay_request).getBody();
response.setContentType("text/html;charset=" + AlipayConfig.CHARSET);
response.getWriter().write(form);//直接将完整的表单html输出到页面
response.getWriter().flush();
response.getWriter().close();
} catch (AlipayApiException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
%>
<!DOCTYPE html>
<html>
<head>
<title>支付宝手机网站支付接口</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

</head>
<body text=#000000 bgColor="#ffffff" leftMargin=0 topMargin=4>
<header class="am-header">
<h1>支付宝手机网站支付接口快速通道(接口名：alipay.trade.wap.pay)</h1>
</header>
<div id="main">
<form name=alipayment action='' method=post target="_blank">
<div id="body" style="clear:left">
<dl class="content">
<dt>商户订单号：</dt>
<dd>
<input id="WIDout_trade_no" name="WIDout_trade_no" />
</dd>
<hr class="one_line">
<dt>订单名称：</dt>
<dd>
<input id="WIDsubject" name="WIDsubject" />
</dd>
<hr class="one_line">
<dt>付款金额：</dt>
<dd>
<input id="WIDtotal_amount" name="WIDtotal_amount" />
</dd>
<hr class="one_line"/>
<dt>商品描述：</dt>
<dd>
<input id="WIDbody" name="WIDbody" />
</dd>
<hr class="one_line">
<dt></dt>
<dd id="btn-dd">
<span class="new-btn-login-sp">
<button class="new-btn-login" type="submit" style="text-align:center;">确 认</button>
</span>
<span class="note-help">如果您点击“确认”按钮，即表示您同意该次的执行操作。</span>
</dd>
</dl>
</div>
</form>
<div id="foot">
<ul class="foot-ul">
<li>
支付宝版权所有 2015-2018 ALIPAY.COM
</li>
</ul>
</div>
</div>
</body>
<script language="javascript">
function GetDateNow() {
var vNow = new Date();
var sNow = "";
sNow += String(vNow.getFullYear());
sNow += String(vNow.getMonth() + 1);
sNow += String(vNow.getDate());
sNow += String(vNow.getHours());
sNow += String(vNow.getMinutes());
sNow += String(vNow.getSeconds());
sNow += String(vNow.getMilliseconds());
document.getElementById("WIDout_trade_no").value = sNow;
document.getElementById("WIDsubject").value = "手机网站支付测试商品";
document.getElementById("WIDtotal_amount").value = "0.01";
document.getElementById("WIDbody").value = "购买测试商品0.01元";
}
GetDateNow();
</script>
</html>

//就是在点HTML页面里的结算按钮时，把HTML里商品的介绍，价格传到JSP页面里的
document.getElementById("WIDout_trade_no").value = sNow;
document.getElementById("WIDsubject").value = "手机网站支付测试商品";
document.getElementById("WIDtotal_amount").value = "0.01";
document.getElementById("WIDbody").value = "购买测试商品0.01元";
实现支付功能
...全文
568 3 打赏 收藏 转发到动态 举报
写回复
用AI写文章
3 条回复
切换为时间正序
请发表友善的回复…
发表回复
X元素 2018-01-22
  • 打赏
  • 举报
 回复
引用 2 楼 qq_37878669 的回复:
能麻烦说的详细一点么，我水平很低
// 调用SDK生成表单
form = client.pageExecute(alipay_request).getBody();
response.setContentType("text/html;charset=" + AlipayConfig.CHARSET); 
    response.getWriter().write(form);//直接将完整的表单html输出到页面 
    response.getWriter().flush(); 
    response.getWriter().close();
1.获取到form表单内容(我印象里是段html+js代码片,可通过debug模式查看form内容) 2. 直接copy出来form内容，然后复制到你的一个html页面中，例如example.html 3.访问example.html查看具体内容 其实上面这几部就是以流形式返回的一种表现；
qq_37878669 2018-01-22
  • 打赏
  • 举报
 回复
能麻烦说的详细一点么，我水平很低
X元素 2018-01-22
  • 打赏
  • 举报
 回复
通过数据流，直接将你的alipay响应输出到页面，让html 自己解析；
第7讲：v-bind属性绑定,v-model双向绑定,v-on事件监听使用
v-model一般用于数据的双向绑定（表单元素设置了之后会忽略掉value，checked，selected），常用在表单 及 1.v-bind 指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），v-model属性的值是一个数据的变量,如果数据的值发生变化,会影响input的值,input的值的变化同时影响数据的变化。如果v-model,绑定的是一个字符串,咱们绑定的值,会转成布尔值,-- 绑定一个属性 -->
java版+支付宝支付和微信支付(一)
最近公司在做支付模块，在接入过程中遇到了很多坑，费了不少事，现在分享一下接入方法，也记录一下，以后可能还用的到。用的是支付宝的即时到帐支付功能和微信的扫码支付功能，相比起来，个人感觉支付宝的文档和接入方式都比微信的容易理解和操作，也不用自己写页面，接入起来比较方便，毕竟是支付起家的，比微信支付少很多坑，下面就分别介绍着两种支付的接入方法。 支付宝支付 1、申请签约 目的是得到开发使用的合作伙...
02-03-JSP-Maven-会话-MySQL事务
02-03-JSP-Maven-会话-MySQL事务unit08-JSP、EL、JSTLJSP概述什么是JSPJSP执行过程修改JSP模版JSP语法模版元素JSP表达式JSP脚本片段JSP注释JSP指令JSP标签技术EL表达式JSTL标签库JSP作业unit09-MavenMaven介绍Maven是什么?为什么要使用Maven?Maven安装下载、安装MavenMaven的相关配置配置本地仓库位置配置镜像仓库(私服)配置JDK版本将Maven配置到Eclipse中Maven的项目构建创建简单工程—Java工
呕心沥血，拒绝水货，Jsp结和js做前端开发经验<一>
都是干货哦。 1.以ModelAdnView传数据到jsp页面，如何使用数据。 2. 页面导航后退功能 3. js操作style样式方式，比如根据判断结果不一样，显示不一样 4. 页面跳转参数传递 5. 使用Vue.js，下载Vue.js库并引入 jsp页面里 6. html里获取当前索引值 7. 弹出框，引入bunndle.js 8. 我想取索引值小于3的所以li 9. 请求报
JAVAWEB-NOTE03：JSP、EL、JSTL、 bean组件的概念、Maven、cookie/session、MySQL数据库事务
文章目录@[toc] unit08-JSP、EL、JSTLJSP概述什么是JSPJSP执行过程修改JSP默认编码JSP语法模版元素JSP表达式JSP脚本片段JSP注释JSP指令JSP标签技术EL表达式JSTL标签库如何隐藏暂时不用的项目JSP作业unit09-MavenMaven介绍Maven是什么?为什么要使用Maven?Maven安装下载、安装MavenMaven的相关配置配置本地仓库位置配置远程（镜像）仓库(私服)配置JDK版本将Maven配置到Eclipse中Maven的项目构建创建简单工程—Jav
Eclipse

58,452

社区成员

49,451

社区内容

发帖
与我相关
我的任务
社区描述
Java Eclipse
社区管理员
  • Eclipse
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章