Question

我正在尝试使用ajax将动态表单数据提交给spring控制器，以便我可以稍后将对象列表保存到数据库中。一切都已设置，但我无法处理ajax部分中的动态表单数据。问题是如何为表的每一行创建javascript对象并将这些对象作为JSON数据发布。所有代码都是这样的：

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>

JS

$(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);
    }

提前谢谢

使用ajax将动态表单字段数据发布到弹簧控制器

0 个答案: