JAVA WEB 前台后台交互

应该是从上个周四开始到今天正好一周的时间,我制作一个页面.周六周日没休息,昨天加班到凌晨.其中改了一次需求,从前台到后台都我一人负责.其中收获颇多,算是初步弄清楚了框架的内容。

前台ajax或者form提交并调用后台方法,在controller中写后台方法,将前台提交的数据做处理,并且return一个值,或者把值传回jsp页面.其中controller调用service,并在serviceImpl中写实现类，实现类中可以把sql写在dao里。

在这一周的时间里，弄明白了前台如何往后台提交数据，后台如何往前台返回值，下面是我的一些总结。

一、前台提交数据

1、form提交

form提交方式比较传统，是大多java Web教程里的方法。

html:

<form action='' method='post' id='A010101form'>
<label><input type='checkbox' name='test' value='厕所梗'><span>厕所梗</span></label>
<input type="submit" onclick="javascript:save();"/>
<input type="test" value="<%=test%>" />
</form>

value 属性为 input 元素设定值。

对于不同的输入类型，value 属性的用法也不同：

• type="button", "reset", "submit" - 定义按钮上的显示的文本
• type="text", "password", "hidden" - 定义输入字段的初始值
• type="checkbox", "radio", "image" - 定义与输入相关联的值

注释：<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。

注释：value 属性无法与 <input type="file"> 一同使用。

js:

function save(){
document.form[0].action="<%=webapp%>/test/save.act";
//两种获取form的方式
$("#A010101form").submit();
}

在jsp页面html上面要加上

<%
String webapp = request.getContextPath();
String test = request.getAttribut("test");
%>

用来获取提交地址的根目录

2、ajax提交

JS：

function save(){
var pars=$("#A010101form").find("span").test();
var jj='';
var url="<%=webapp%>/test/save.act?pars="+pars"&jj="+jj;//提交2个参数用&连接
ajaxRequest(url,doResponse,showFail);
}
//回调函数,param为后台返回的参数
function doResponse(param){
if(param==null){
alert("有问题");
return;
}
//url写错了会报这个
function showFail(){
alert("系统发生变异！");
}
//异步提交
function ajaxRequest(rurl,onCompleteFun,onFailureFun,params,asynFlag){var async = true;var param = "";if(params != undefined){param = params;}if (asynFlag!= undefined){if ((asynFlag==false) || (asynFlag=="false")){async = false;}else{async = true;}}jQuery.ajax({async: async,type: "POST",url: rurl,contentType: "application/x-www-form-urlencoded;charset=UTF-8",data: param,dataType:'json',beforeSend: function(xhr) {xhr.setRequestHeader("__REQUEST_TYPE", "AJAX_REQUEST");},success: eval(onCompleteFun),error: eval(onFailureFun)});}

二、后台接受前台提交的参数

1、form方式

public class A010101Form{
private String test;
//myeclipse soursce getters and setters 可自动生成
public String test() {
return test;}public void test(String test) {this.test = test;}
}

@RequestMapping("/a010101")public class A010101Controller {
@Resource
private A010101Service A010101Service;@RequestMapping("/save")public String save(HttpServletRequest request,A010101Form form) throws Exception{List list = A010101Service.save(form);//后台处理

     request.setAttribute("list",list);return "/test/A010101List";//返回数据}
}

@Service("A010101Service")
public interface A010101Service {
public List save(A010101Form form) throws Exception;
}

//实现类
public class A010101ServiceImpl implements A010101Service{private static final String String = null;@Resourceprivate A010101Dao A010101dao;
@Override
public List save(A010101Form form) throws Exception {return A010101Dao.save(this.getRequest(),form);}}

@Repository("/A010101Dao")public class A010101Dao  {
public save(HttpServletRequest request,A010101Form form){
String test = form.getTest();
String userid = Comquery.getUserId(request);
StringBuffer sql = new StringBuffer;
sql.append("select * from data_test where test = ' " +test+ " and userid  = ' " +userid + " ") ;
this.executeUpdate(sql);
}
}

2、ajax提交

@RequestMapping("/a010101")public class A010101Controller {@Resourceprivate A010101Service A010101Service;@RequestMapping("/save")//ajax必须加这个，而且ajax不能用void，因为void不需要return不合理@ResponseBodypublic String save(HttpServletRequest request,String test,String jj) throws Exception{return A010101Service.save(test,jj);//ajax只能返回值不能返回页面}}

以上便是前后台交互的大体过程，其中细节还需要再研究。大体轮廓便是这样了

紧张时放松自己，烦恼时安慰自己，开心时别忘了祝福自己！