将 UI 连接到控制器和数据库答案

【问题标题】：connecting UI to Controller and Database将 UI 连接到控制器和数据库
【发布时间】：2019-07-29 11:37:17
【问题描述】：

我希望我的 Ui 有一个文本字段，用户将在其中输入 streamId streamId 的值为 1,2,3 等单击确定后，我的数据库应该根据streamid在表格的屏幕内容上显示一个表格。这些是代码。

<!DOCTYPE HTML>
 
<html>
<head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
       <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
	 <!--  <script src="/js/jqueryAjaxGet.js"></script> -->
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
      <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script type="text/javascript">
 $(document).ready(function() {
    $('#example').DataTable( {
       	"processing": true,
       	"serverSide": true,
		"bPaginate": false,
		"bFilter": false,
		"bInfo": false,
	    "ajax": {
	        "url": "/Spring-Test/college/streamId",
	        "dataSrc": ""
	    },
	    "columns": [
	        { "data": "collegeId" },
	        { "data": "collegeName" },
	        { "data": "collegeAddress" }
	    ]
    } );
} );
</script>
</head>
 
<body>
<div class="container">
    
     <input type="number" name="streamId" placeholder="search"/>
    <a href="#" onclick="function()"></a> 
	<table id="example" class="display" style="width:100%">
	 
		<thead>
		    <tr>
		        <th>id</th>
		        <th>Name</th>
		        <th>Address</th>
		    </tr>
		</thead>
	</table>
	<!-- <h1>Customer Table</h1>
		<div class="row col-md-7 table-responsive">
			<table id="customerTable" class="table table-bordered table-hover">
				<thead>
					<tr>
						<th>Id</th>
						<th>Name</th>
						<th>Age</th>
						<th>Street</th>
						<th>Postcode</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div> -->
</div>
	
</body>
</html>

这是页面的 UI 代码。

package enroute.spring.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import enroute.spring.model.College;
import enroute.spring.model.Course;
import enroute.spring.model.ErrorResponse;
import enroute.spring.services.area.AreaService;
import enroute.spring.services.college.CollegeService;
import enroute.spring.services.college_course.CourseCollegeService;
import enroute.spring.services.course.CourseService;
import enroute.spring.services.stream.StreamService;

@RestController
public class ApplicationController {
	
	@Autowired
    private CollegeService collegeService;
 
	@Autowired
    private CourseService courseService;
	
	@Autowired
    private AreaService areaService;
	
	@Autowired
    private CourseCollegeService collegeCourseService;
	
	@Autowired
    private StreamService streamService;
	
	//Get Colleges Name By Stream Id
	@RequestMapping(value="/college/{streamId}", method= RequestMethod.GET)
	public @ResponseBody List<College> getColleges(@PathVariable int streamId){
		 List<College> list = collegeService.getSpecificColleges(streamId);
		 return list;
	}
	
	//Get Courses Name By Stream Id
	@RequestMapping(value="/courses/{streamId}", method= RequestMethod.GET)
	public @ResponseBody List<Course> getSpecificColleges(@PathVariable int streamId){
		 List<Course> list = courseService.getSpecificColleges(streamId);
		 return list;
	}
	
	//Get courses By college Name
	@RequestMapping(value="/college/{collegeName}/courses", method= RequestMethod.GET)
	public @ResponseBody List<Course> getCoursesFromColleges(@PathVariable String collegeName){
		 List<Course> list = collegeService.getCoursesFromColleges(collegeName);
		 return list;
	}
	
	
	@ExceptionHandler(Exception.class)
	public ResponseEntity<ErrorResponse> exceptionHandler(Exception ex) {
		ex.printStackTrace();
		ErrorResponse error = new ErrorResponse();
		error.setErrorCode(HttpStatus.PRECONDITION_FAILED.value());
		error.setMessage(ex.getMessage());
		return new ResponseEntity<ErrorResponse>(error, HttpStatus.OK);
	}
	
}

这是我的控制器。我该怎么办？传递streamId并获取表。

【问题讨论】：

标签： html ajax spring-mvc

【解决方案1】：

你应该尝试添加一个点击事件，从一些输入中获取你想要搜索的 id：

$('#myInputId').on('click',function(){
 var id = this.value;
 //here check if is a valid id then run a fucntion to load your table
 loadTable(id);
});

现在让我们检查一下函数：

function loadTable (Id){


exampleTable = $('#exampleTable').DataTable();
if ($.fn.DataTable.isDataTable("#exampleTable")) {
  exampleTable.destroy();
  $('#exampleTable tbody').remove();
} // check if table exist and destroy previous data set
//Your datatable should be declared like this:

  var example= $('#example').DataTable({
                "destroy": true,
                "responsive":{
                  "details": {
                  renderer: function ( api, rowIdx, columns ) {
                    var data = $.map( columns, function ( col, i ) {
                      return col.hidden ?
                        '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                          '<td>'+col.title+':'+'</td> '+
                          '<td>'+col.data+'</td>'+
                        '</tr>' :
                        '';
                    } ).join('');

                    return data ?$('<table/>').append( data ) :false;
                  }
                }
              },
                "autoWidth": false,
                      "ajax": {
                          "url": 'some.php',
                          "method": 'POST',
                          data:{accion:"SLC", Id : Id}
                      },
                      "columns": [
                          {"data": "client"},
                          {"data": "name"},
                          {"data": "lastname"},
                          {"data": "device"},
                          {"data": "city"},
                          {
                       className: "center",
                       defaultContent:"<select id='idSelect' name ='idSelect'  ><option value='default'>Seleccionar</option><option value='1'>hello</option></select>"
                     }
                      ],
                      "language":{"url": "//cdn.datatables.net/plug-ins/1.10.15/i18n/Spanish.json"},
                        "columnDefs": [
                          {
                            "className": "dt-center", "targets": "_all"
                           }
                        ]
                  }
                );

}

希望对你有帮助

【讨论】：