基于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>
相关推荐
在“jQuery-ajax-用户名异步请求”这个场景中，我们可能是在设计一个注册或登录界面，需要在用户输入用户名时实时检查该用户名是否已被占用。这个过程可以通过Ajax调用后台接口实现，避免用户频繁提交表单进行检查。...
本示例工程"Java通过jQuery实现ajax异步请求"着重展示了如何利用jQuery的AJAX功能与后端Java服务器进行数据通信，从而实现页面的无刷新更新。以下将详细解释这个过程中涉及的关键知识点。 首先，jQuery是一个强大的...
- **带参数的Ajax异步请求**： ```javascript $.ajax({ type: "POST", async: false, cache: false, url: "listComplaintQuantityReports.action", data: { "quantityReport.summaryStartDate": $("#...
"利用Ajax+Jquery实现异步进度条效果"这个主题正是围绕这一目标展开，它涉及到C#后端开发、.NET框架、Ajax技术以及Jquery库的前端应用。下面将详细阐述这些知识点。 首先，C#是一种面向对象的编程语言，广泛应用于...
在IT领域，特别是Web开发中，jQuery作为一个流行的JavaScript库，为开发者提供了丰富的工具来简化HTML文档遍历、...掌握jQuery异步请求的使用，对于任何希望提升网站交互性的前端开发者来说，都是不可或缺的技能之一。
在这个实例中，我们将使用jQuery的$.ajax方法来发起一个异步请求。$.ajax方法接受一个配置对象，该对象包含了许多可选参数，如URL、请求类型（GET或POST）、数据类型（如JSON、HTML等）以及回调函数等。下面是一个...
在JavaScript的世界中，jQuery库极大地简化了与服务器端交互的过程，特别是对于异步请求（Ajax）和处理返回的JSON数据。本篇文章将深入探讨如何使用jQuery的`$.ajax`方法来实现异步请求并接收JSON数据。 首先，JSON...
本篇文章将深入探讨Ajax异步请求的验证，解决初级问题，为初学者提供参考。 一、Ajax的基本概念 Ajax并非一种单一的技术，而是一种利用现有Web技术（如JavaScript、XML、HTML、CSS等）组合成的新应用方式。它的...
2. **编写Ajax请求**：使用jQuery的`.ajax()`方法发送异步请求，获取分页数据。例如： ```javascript $.ajax({ url: 'your-api-url', type: 'GET', data: { page: currentPage, pageSize: pageSize }, success: ...
在jQuery中，使用Ajax非常简单，它提供了$.ajax()、$.get()和$.post()等函数来处理异步请求。对于分页应用，我们通常使用$.get()或$.post()，因为它们更简洁易用。 实现Ajax异步分页的基本步骤如下： 1. **HTML...
1. jQuery的AJAX方法：在文章中，通过使用jQuery提供的$.ajax()方法来发起异步请求。这个方法允许我们指定请求的类型（如GET或POST）、URL地址、传递的数据以及当请求成功时如何处理返回的数据。 2. 后台数据的返回...
**Ajax异步请求详解** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新，大大提升了用户体验。...
用javascript硬编码方式和jquery框架方式完成ajax异步请求的示例源码。直接访问方式是，可以直接在tomcat启动后访问helloAjaxDemo.jsp或是helloJQueryAjaxDemo.jsp。
本文将深入探讨jQuery中的异步请求，即AJAX（Asynchronous JavaScript and XML），并提供一个实例来帮助理解。 AJAX是Web开发中的核心技术之一，允许在不刷新整个页面的情况下与服务器进行数据交互。jQuery的$.ajax...
用javascript硬编码方式和jquery框架方式完成ajax异步请求的示例，不包括源码。直接访问方式是，可以直接在tomcat启动后访问helloAjaxDemo.jsp或是helloJQueryAjaxDemo.jsp。比如：...
**Ajax异步请求服务器——基于Jquery** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个页面的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，使得网页实现异步更新。在本...
总结起来，这个"一个实用了spring mvc和ajax异步请求的例子"涵盖了Web开发中的重要概念，包括Spring MVC的Controller设计、RESTful API的实现以及Ajax的异步数据交互。这样的组合使得Web应用更加动态，用户体验更佳...
在本文中，我们将深入探讨如何使用Java和jQuery AJAX来实现异步请求，从而获取服务器端的一个List对象，并将其数据填充到前端的下拉框（dropdown）中。这个过程涉及到前端与后端的交互，JSON对象的序列化和反序列化...
本文将详细讲解如何使用JQuery、JSON和Struts2框架来实现Ajax异步请求。 首先，JQuery是一个轻量级、高性能的JavaScript库，它简化了DOM操作、事件处理以及AJAX交互。在JQuery中，我们可以通过多种方法来发起Ajax...
总结来说，"jQuery+Ajax异步加载分页代码.zip"示例展示了一个完整的异步分页解决方案，涵盖了前端事件绑定、Ajax请求、服务器数据交互以及后端响应处理。这个例子不仅适用于初学者了解异步分页的基本原理，也为有...