欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery之Ajax异步请求

程序员文章站 2024-01-26 08:06:58
...

 

基于playframework1.5

 

路由表

# Routes
# This file defines all application routes (Higher priority routes first)
# ~~~~

# Home page
GET     /                                       Application.index

*       /reg                                    Register.reg
GET     /list                                   Register.list
GET     /users                                  Register.users
POST    /delete                                 Register.delete
*       /                                       module:secure

# Ignore favicon requests
GET     /favicon.ico                            404

# Map static resources from the /app/public folder to the /public path
GET     /public/                                staticDir:public

# Catch all
*       /{controller}/{action}                  {controller}.{action}

 

模型

 

package models;

import javax.persistence.Entity;

import play.db.jpa.Model;

@Entity
public class User extends Model {
	public String username;
	public String password;
	
	
	
	public User() {
		super();
	}



	public User(String username, String password) {
		super();
		this.username = username;
		this.password = password;
	}
	
	
}

 

控制器

package controllers;

import models.User;
import play.mvc.Controller;

public class Register extends Controller {
	
	public static void reg(User user) {
		if(user.username == null) {
			render();
		} else {
			user.save();
			list();
		}
	}
	
	
	public static void list() {
		render();
	}
	
	public static void users() {
		renderJSON(User.findAll());
	}
	
	public static void delete(Long id) {
		User user = User.<User>findById(id);
		if(user!=null) {
			System.out.println("delete:"+user.username);
			user.delete();
		}
	}
	
}

 

注册页面

 reg.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="@{Register.reg()}" method="post">
		<p>
			<label for="username">username:</label>
			<input type="text" name="user.username" id="username"/>
		</p>
		<p>
			<label for="password">password:</label>
			<input type="password" name="user.password" id="password"/>
		</p>
		<p>
			<input type="submit" value="save"/>
		</p>
	</form>
</body>
</html>

 

 

用户列表

点击checkbox框,后台发起请求,将对于的用户删除

获取数据用GET

传递数据用POST

list.html

#{extends 'main.html' /}

<script type="text/javascript">
	$(function(){
		var url = "@{Register.users}";
		//get方式 : url, callback function
		$.get(url,function(data,status){
			if(status=="success") {
				$.each(data,function(idx,item){
					$("body").append("<p><input type='checkbox' value='"+item.id+"'/>"+item.username+":"+item.password+"</p>");
				})
			}
		});
		
		$("p").live("click",function(){
			var currentNode = $(this);
			//当p区域被处理过之后,就不再向后台发起请求了 
			if($(":checked",currentNode).attr("disabled")!="disabled") {
				var url = "@{Register.delete()}";
				//post方式 :url , params , callback function
				$.post(url,{
					id: $(":checked",this).val()
				},
				function(data,status) {
					if(status=='success') {
						$(":checked",currentNode).attr("disabled","true");
						$(currentNode).css("background-color","red");
						//$(currentNode).slideToggle();
					}
				});
			}
		});
	});
	
	
</script>

<a href="@{Register.reg()}">继续</a>