zoukankan      html  css  js  c++  java
  • 页面中的删除确认(ajax)、输入框中确认信息是否可用(ajax)的jquery代码

    1.页面中的删除确认(ajax)

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

    <%@taglib prefix="s" uri="/struts-tags" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
    <script type="text/javascript">
    $(function(){
    $(".delete").click(function(){
    var lastName=$(this).next(":hidden").val();
    var flag=confirm("确定要删除 "+ lastName + "的信息吗?");//confirm的返回值:当点击确定时,返回值为true,当点击取消时,返回值为false
    if(flag){
    var $tr=$(this).parent().parent();
    //使用ajax方式进行删除操作
    var url=this.href;
    var args={"time":new Date()};
    jQuery.ajax({
    type:'post',
    data:args,
    url:url,
    success:function(data){ //通过实践发现,若ajax有返回值,那么data就是返回值,若data没有返回值,默认情况下,这个data指的是就是当前这个页面
    console.log(data);
    if(data=='1'){
    alert('delete successfully');
    $tr.remove();
    }
    else{
    alert('delete unsuccessfully');
    }
    }
    })
    }
    return false;
    });

    })
    </script>

    </head>
    <body>
    <h4>Employee List Page</h4>
    <s:if test="#request.employee==null || #request.employee.size()==0">
    没有员工数据信息
    </s:if>
    <s:else>
    <table border="1" cellpadding="10" cellspacing="0">
    <tr>
    <td>ID</td>
    <td>LastName</td>
    <td>Email</td>
    <td>Birth</td>
    <td>CreateTime</td>
    <td>Department</td>
    <td>edit</td>
    </tr>
    <s:iterator value="#request.employee">
    <tr>
    <td>${id}</td>
    <td>${lastName}</td>
    <td>${email}</td>
    <td>
    <s:date name="birth" format="yyyy-mm-dd"/>
    </td>
    <td><s:date name="createTime" format="yyyy-mm-dd hh:mm:ss"/>
    </td>
    <td>${department.departmentName}</td>
    <td><a href= "emp-delete?id=${id}" class="delete">Delete</a>
    <input type="hidden" value="${lastName}">
    </td>
    </tr>
    </s:iterator>
    </table>
    </s:else>
    </body>
    </html>

    2.输入框中确认信息是否可用(ajax):

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@taglib prefix="s" uri="/struts-tags"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <script type="text/javascript" src="scripts/jquery-1.7.2.js"></script>
    <script type="text/javascript">

    $(function(){
    $(":input[name=employee.lastName]").change(function(){
    var val=$(this).val();
    val=$.trim(val);
    var $this=$(this);
    var url="emp-valid";
    var args={"lastName":val,"time":new Date()};
    if(val !=""){
    $this.nextAll("font").remove();
    jQuery.ajax({
    type:'post',
    data:args,
    url:url,
    success:function(data){
    if(data=='1'){
    $this.after("<font color='green'>LastName可用!</font>");
    }else if(data='0'){
    $this.after("<font color='red'>LastName不可用!</font>");
    }
    else{
    alert("服务器异常");
    }
    }
    })
    }
    })
    })
    </script>
    </head>
    <body>
    <h4>Add new Employee</h4>
    <s:form action="emp-save" method="post">
    <s:textfield name="employee.lastName" label="LastName"></s:textfield>
    <br>
    <s:textfield name="employee.email" label="Email"></s:textfield><br>
    <s:textfield name="employee.birth" label="Birth"></s:textfield><br>

    <s:select list="#request.department"
    listKey="id" listValue="departmentName" name="employee.department.id" label="Department"></s:select><br>

    <s:submit> </s:submit>
    </s:form>
    </body>
    </html>

  • 相关阅读:
    elementui 表格格式化
    安装mongoDB出现的问题:无法启动
    学习笔记-angular 使用uuid
    cordova app打包apk签名
    ionic3 清除navpush的堆栈 (android真机返回键bug)
    ionic3 StatusBar 不显示问题
    ionic3+angular 倒计时效果
    windows下一台机器运行多个tomcat
    JDBC连接数据库小结
    工具类---提供精确的浮点数运算
  • 原文地址:https://www.cnblogs.com/zhangshitong/p/5237762.html
Copyright © 2011-2022 走看看