ajax提交表單數據到controller

本文轉載自查看原文 2019-06-26 14:59 1118

表單

<div class="addDIV">

    <div class="panel panel-success">
        <div class="panel-heading">
            <h3 class="panel-title" style="text-align:center">增加學生</h3>
        </div>
        <div class="panel-body">

            <form method="post" id="addForm" onsubmit="return validateForm();" role="form">
                <table class="addTable">
                    <tr>
                        <td>學號：</td>
                        <td><input type="text" name="student_id" id="student_id" placeholder="請在這里輸入學號"></td>
                    </tr>
                    <tr>
                        <td>姓名：</td>
                        <td><input type="text" name="name" id="name" placeholder="請在這里輸入名字"></td>
                    </tr>
                    <tr>
                        <td>年齡：</td>
                        <td><input type="text" name="age" id="age" placeholder="請在這里輸入年齡"></td>
                    </tr>
                    <tr>
                        <td>性別：</td>
                        <td><input type="radio" checked class="radio radio-inline" name="sex" value="男"> 男
                            <input type="radio" class="radio radio-inline" name="sex" value="女"> 女
                        </td>
                    </tr>
                    <tr>
                        <td>出生日期：</td>
                        <td><input type="date" name="birthday" id="birthday" placeholder="請在這里輸入出生日期"></td>
                    </tr>
                    <tr class="submitTR">
                        <td colspan="2" align="center">
                            <button type="submit" class="btn btn-success">提 交</button>
                        </td>

                    </tr>

                </table>
            </form>
        </div>
    </div>

</div>

js方法

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%-- 引入JQ和Bootstrap --%>
    <script src="js/jquery/2.0.0/jquery-2.1.4.js"></script>
    <link href="css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/myjs/list.js"></script>
    <link href="css/style.css" rel="stylesheet">
    <script type="text/javascript">
       $(function(){
        //頁面加載初始化發送請求獲取json數據。
        $.get(getRootPath()+"/listStudent",
                //需要傳遞的數據：pageIndex ,
                {"pageIndex":"1"},
                function(data){
                    //1.刪除原來的數據
                    $("#datalist").children().remove();
                    $("#pageIndex").children().remove();
                    //2.添加數據
                     eachListStudent(data);
                     eachPageIndex(data);
                });
    });

       $.fn.validate = function(tips){

           if($(this).val() == "" || $.trim($(this).val()).length == 0){
               alert(tips + "不能為空！");
               return false; //如果驗證不通過，則不執行后面
           }
           return true;
       }
      function validateForm(){ //調用validate()
           var s_id = $("#student_id").validate("學號");
           var s_name = $("#name").validate("姓名");
           var s_age = $("#age").validate("年齡");
           var s_birth = $("#birthday").validate("生日");
           var bool= s_id && s_name && s_age && s_birth;
           return addStudent(bool);
       }
 
       //提交表單數據到controller的addStudent,addStudent再重定向到遍歷學生列表的方法
       function addStudent(bool){
           if(bool){
               //發送請求$("#addForm").serialize() 
               $.get(getRootPath()+"/addStudent",
                       $("#addForm").serialize(),
                       function(data){
                       alert("成功添加學生"); }); } } 
     
      
    
    </script>
</head>

myjs

    //點擊下標查詢數據
    function changeIndex(pageIndex){
        //用戶點擊下標，有下標值，ajax請求，然后要刪除表數據和下標數，然后添加表數據和下標數
        $.get(getRootPath()+"/listStudent",
                //需要傳遞的數據：pageIndex ,
                {"pageIndex":pageIndex},
                function(data){
                    //1.刪除原來的數據
                    $("#datalist").html("");
                    $("#pageIndex").html("");
                    //2.添加數據
                       eachListStudent(data); 
                    //3.添加下標數據
                     eachPageIndex(data);
                });
    }
  //地址獲取
       function getRootPath(){
           var rootPath=window.location.pathname; //   /Day517/Ajax.jsp
           var index = rootPath.indexOf("/",1);　　// 獲得第二個斜杠的下標值
           rootPath = rootPath.substring(0,index); //截取獲得從0開始不包括index /Day517  
           return rootPath;
       }
  //遍歷學生集合
    function eachListStudent(data){
         data=eval("("+data+")");
            $(data.beanList).each(function(index,student){
            var html="<tr><td>"
                +student.student_id +"</td><td>"
                +student.name+"</td><td>"
                +student.age+"</td><td>"
                +student.sex+"</td><td>"
                +student.birthday+"</td><td>"
                +"<a href="+"\""+getRootPath()+"/editStudent?id="+student.id+"\">"+"<span class=\"glyphicon glyphicon-edit\"></span> </a></td>"
                +"<td><a href="+"\""+getRootPath()+"/deleteStudent?id="+student.id+" onclick=\"javascript:return del();\"><span class=\"glyphicon glyphicon-trash\"></span> </a></td>" ; 
                $(html).appendTo("#datalist");
            }); 
    }
      //遍歷下標
    function eachPageIndex(data){
        data=eval("("+data+")");
        var html="";
        for(var i=data.beginIndex;i<=data.endIndex;i++){
            //如果是當前頁下標，則沒有點擊切換事件
                if(i==data.beginIndex){
                    html="<li><a href=\"javascript:void(0);\" onclick=\"javascript:return changeIndex(1)\">&laquo;</a></li>";
                    $(html).appendTo("#pageIndex");
                }
                if(data.pageIndex==i){
                        html="<li  class=\"disabled\"><a href=\"javascript:void(0);\">"+i+"</a></li>";
                }else{
                        html="<li><a href=\"javascript:void(0);\" onclick=\"javascript:return changeIndex("+i+")\">"+i+"</a></li>";
                    }
                    $(html).appendTo("#pageIndex");
                if(i==data.endIndex){
                         html="<li><a href=\"javascript:void(0);\" onclick=\"javascript:return changeIndex("+data.totalPage+")\">&raquo;</a></li>";
                         $(html).appendTo("#pageIndex");
                }
         }
    }

后台代碼

@Controller
@RequestMapping("")
public class StudentController {

    @Autowired
    private StudentService studentService;

    @RequestMapping("/addStudent")
    public String addStudent(HttpServletRequest request, HttpServletResponse response) {

        Student student = new Student();

        int studentID = Integer.parseInt(request.getParameter("student_id"));
        System.out.println("studentID:"+studentID);
        String name = request.getParameter("name");
        int age = Integer.parseInt(request.getParameter("age"));
        String sex = request.getParameter("sex");
        Date birthday = null;
        // String 類型按照 yyyy-MM-dd 的格式轉換為 java.util.Date 類
        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
        try {
            birthday = simpleDateFormat.parse(request.getParameter("birthday"));
        } catch (ParseException e) {
            e.printStackTrace();
        }

        student.setStudent_id(studentID);
        student.setName(name);
        student.setAge(age);
        student.setSex(sex);
        student.setBirthday(birthday);

        studentService.addStudent(student);
        return "redirect:listStudent";
    }
    
    
    /**
     * 分頁查詢
     * @param request
     * @param response
     * @return
     * @throws IOException 
     */
    @RequestMapping("/listStudent")
    public void listStudentByPage(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setCharacterEncoding("UTF-8");
        String paramPageIndex = request.getParameter("pageIndex");
        int pageIndex=1;
        if("".equals(paramPageIndex)||paramPageIndex==null) {
            pageIndex=1;
        }else {
            pageIndex=Integer.parseInt(paramPageIndex);
        }
        PageBean<Student> pageBean = studentService.getPageBean(pageIndex, 10);
        JSONObject json =  JSONObject.fromObject(pageBean);
        PrintWriter writer = response.getWriter();
        writer.write(json.toString());
    }
   

    
    
    @RequestMapping("/deleteStudent")
    public String deleteStudent(int id) {
        studentService.deleteStudent(id);
        return "redirect:listStudent";
    }

    
    
    @RequestMapping("/editStudent")
    public ModelAndView editStudent(int id) {
        ModelAndView mav = new ModelAndView("editStudent");
        Student student = studentService.getStudent(id);
        mav.addObject("student", student);
        return mav;
    }

    @RequestMapping("/updateStudent")
    public String updateStudent(HttpServletRequest request, HttpServletResponse response) {

        Student student = new Student();

        int id = Integer.parseInt(request.getParameter("id"));
        int student_id = Integer.parseInt(request.getParameter("student_id"));
        String name = request.getParameter("name");
        int age = Integer.parseInt(request.getParameter("age"));
        String sex = request.getParameter("sex");

        SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd");
        Date birthday = null;
        try {
            birthday = simpleDateFormat.parse(request.getParameter("birthday"));
        } catch (ParseException e) {
            e.printStackTrace();
        }

        student.setId(id);
        student.setStudent_id(student_id);
        student.setName(name);
        student.setAge(age);
        student.setSex(sex);
        student.setBirthday(birthday);

        studentService.updateStudent(student);
        return "redirect:listStudent";
    }
}

https://blog.csdn.net/jiangyu1013/article/details/72179611 添加除了表單參數外的其他參數，也可以使用隱藏標簽hidden

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ajax提交表單數據不跳轉 jquery的ajax獲取form表單數據、提交表單form jquery ajax異步提交表單數據的方法關於$.ajax()中使用serialize()提交form表單數據 JQuery Ajax() serialize()方法提交Form表單數據 jQuery ajax中使用serialize() 方法提交表單數據 Spring MVC Ajax 嵌套表單數據的提交 jQuery ajax中使用serialize() 方法提交表單數據 laravel實現jquery_ajax無刷新提交form表單數據 ajax提交完表單數據依然跳轉的解決辦法