Home >Web Front-end >JS Tutorial >ajax+springmvc implements data exchange method between C and View

ajax+springmvc implements data exchange method between C and View

亚连
亚连Original
2018-05-22 16:21:581601browse

Now I will bring you an article on ajax springmvc to realize the data exchange method between C and View. Let me share it with you now and give it as a reference for everyone.

jQuery.post(url, [data], [callback], [type])

url,[data],[callback],[type]String,Map,Function,StringV1 .0url: Send request address.

data: Key/value parameters to be sent.

callback: Callback function when the transmission is successful.

type: Return content format, xml, html, script, json, text, _default.

Format:

$.post("test.php", function(data){
  alert("Data Loaded: " + data);
 });

$.get("comment/getComments?parentId="+parentId+"&topicId="+topicId,function(data){
 var appendButton ="";
 var append = "";
 if(data!=""){
  var arr = data.split("$");
  var allTr="";
  for(var i = 0;i<arr.length;i++){
  var arr2 = arr[i].split(&#39;,&#39;);
  var name = arr2[3];
  var content = arr2[0];
  var time= "/Date("+arr2[1]+")/";
  time = DateFormat(time);
  var id = arr2[2];
  var table = "<table><tr><td>"+content+"</td></tr><tr><td>"+time+"</td></tr></table>";
  appendButton = appendButton+table+"<button type = &#39;button&#39; id = &#39;toAddCommentId&#39; onclick = &#39;replaceFrom("+parentId+",\""+name+"\""+")&#39;>回复</button>";
  }
  appendButton = appendButton+"<button type = &#39;button&#39; onclick = &#39;replaceFrom("+parentId+","+"\""+userName+"\""+")&#39;>我也说一句</button>";
 }
 appendButton = appendButton+"<p id = &#39;commentButton&#39; ></p><p id = &#39;textareaId&#39;></p>";
 if(data==""){
  appendButton = appendButton+"<textarea id=&#39;textareaId"+parentId+"&#39; rows=&#39;2&#39; cols=&#39;77&#39; validate=&#39;required&#39; validate-message=&#39;不能为空!&#39; name = &#39;content&#39; >@"+userName+"...."+"...."+parentId+":</textarea><button type = &#39;button&#39; id = &#39;commentContentId&#39; onclick = &#39;submit("+topicId+","+parentId+","+"\""+userName+"\""+")&#39;>发表</button>";
 }
 $("#addCommentId"+parentId).html(appendButton);
 });

Backend:

@RequestMapping(value = "/saveAndGetComments", params = {"topicId","parentId"}, method = RequestMethod.POST)
 @ResponseBody
 public String saveAndGetComments(long topicId,Comment comment,long parentId) throws UnsupportedEncodingException{
 comment.setParentId(parentId);
 commentService.save(comment,topicId);
 List<Comment> comments=commentService.listByCommentId(parentId);
 return append(comments);
 }
 
 private String append(List<Comment> comments) {
 StringBuffer sb=new StringBuffer();
 for(int i=0;i<comments.size();i++){
  Comment comment = comments.get(i);
  sb.append(comment.getContent());
  sb.append(",");
  sb.append(comment.getCreateTime().getTime());
  sb.append(",");
  sb.append(comment.getId());
  sb.append(",");
  sb.append(comment.getUser().getName());
  if(i!=comments.size()-1){
  sb.append("$");
  }
 }
 return sb.toString();
 }

Note , use springmvc3 annotation @responseBody to pass parameters.

Frequently used js functions:

The above data is transmitted using json, and when js parses the date passed by json, it is not in the format we want. , then you need to operate on the date:

First pass the past date, set it to time and pass it to date.getTime()

Then operate in js:

var date= "/Date("+time+")/";
date = DateFormat(date);



/**
 * 处理时间
 * @param value
 * @returns {String}
 */
function DateFormat(value) {
  var date = new Date(parseInt(value.replace("/Date(", "").replace(")/", ""), 10));
  var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
  var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var Hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
  var Minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
  var Seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();

  return date.getFullYear() + "/" + month + "/" + currentDate + " " + Hours + ":" + Minutes + ":" + Seconds;
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

5 Ajax interaction methods between Spring MVC front-end and back-end

Servlet always reports when interacting with Ajax Solution to status=parsererror

Various gestures of front-end ajax interacting with the back-end (graphic tutorial)

The above is the detailed content of ajax+springmvc implements data exchange method between C and View. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn