使用ajax發佈動態表單字段數據到spring rest控制器

我正在嘗試使用ajax將動態表單數據提交給spring控制器，以便以後可以將對象列表保存到數據庫中。一切都設置好了，但我無法處理ajax部分的動態表單數據。問題是如何爲表格的每一行創建JavaScript對象，並將這些對象作爲JSON數據發佈。所有的代碼是這樣的：使用ajax發佈動態表單字段數據到spring rest控制器

HTML

<html> 
    <head> 
     <title>Add Students</title> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    </head> 
<body> 
     <div class="container"> 
      <div class="form-group"> 
        <form id="student_detail" name="student_detail"> 

         <table class="table table-bordered" id="student_dynamic_table"> 
          <tr> 
           <td><input type="text" name="name[]" id="name" placeholder="Enter Name" class="form-control name_list" /></td> 
           <td><input type="text" name="age[]" id="age" placeholder="Enter Age" class="form-control age_list" /></td> 
           <td><button type="button" name="add" id="add" class="btn btn-success">+</button></td> 
          <tr> 
         </table> 
         <input type="button" class="btn btn-info" id="submit" name="submit" value="Submit" /> 
        </form> 
      </div> 
     </div> 
    </body> </html>

$(document).ready(function(){ 
    var i=0; 
    $('#add').click(function(){ 
     i++; 
     $('#student_dynamic_table').append('<tr id="row'+i+'"> <td><input type="text" name="name[]" id="name'+i+'" placeholder="Enter Name" class="form-control name_list" /></td><td><input type="text" name="age[]" id="age'+i+'" placeholder="Enter Age" class="form-control age_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">x</button></td><tr>'); 
    }); 
    $(document).on('click','.btn_remove', function(){ 

    var button_id=$(this).attr("id"); 
    //id of the clicked button 
    $('#row'+button_id+'').remove(); 
    }); 
$('#submit').click(function(){    
     var url= "${pageContext.request.contextPath}"; 

     var student = ({ 
      name : $('#name').val(), 
      age : $('#age').val() 
     }); 

$.ajax({ 
     type : "POST", 
     url : url + '/submitDynamicForm', 
     data:JSON.stringify( student), 
     dataType : 'json', 
     contentType : 'application/json', 
     success : function(response) 
     { 
     } 
    }); }); });

控制器

@Autowired 
private StudentDao studentDao; 

@RequestMapping(value = "/dynamic", method = RequestMethod.GET) 
public ModelAndView geDynamicForm() { 
    ModelAndView form = new ModelAndView("dynamicform"); 
    return form; 
} 

@RequestMapping(value = "/submitDynamicForm", method = RequestMethod.POST) 
public void saveUser(@RequestBody List<Student> student) { 

    studentDao.insertListOfStudent(student); 
    } }

型號

@Entity 
public class Student { 

@Id 
@GeneratedValue 
private Long id; 

@Column(name = "name") 
private String name; 

@Column(name = "age") 
private int age; 

// getters setters 

}

Hibernate來插入學生的名單

@Transactional 
public void insertListOfStudent(List<Student> student) { 
    Session session = sessionFactory.getCurrentSession(); 
    for(Student std : student) { 
     session.save(std); 
    }

預先感謝您

來源

2016-12-01 Prakash Bist

var totalRow=$('#student_dynamic_table tr').length; // last row count 
var data={}; //object 
for (i = 0; i < totalRow; i++) { 
    data[$("#row"+i).val()] = $("#age"+i).val(); // adding value to data object which will be in key value format({"ram:"21","hari":"25"}) 
} 

data: { "jsonData": JSON.stringify(data) }, // on your ajax data submit 


so now in you controller you can get the data with .key() and .value() but make sure you parse with JSON.parse before .

來源

2016-12-02 14:42:43

使用ajax發佈動態表單字段數據到spring rest控制器

回答

相關問題