这是我的postrequest.js文件
function ajaxPost(){
var $firstName = $('#firstName');
var $lastName = $('#lastName');
var $email = $('#email');
var customerData = {
firstName : $firstName.val();
lastName : $lastName.val();
email: $email.val();
};
$.ajax({
type: "POST",
contentType : "application/json",
url:"addCustomer",
dataType: 'json',
data: JSON.stringify(customerData),
success: function(response){
$('#postResultDiv').html(response);
console.log(response);
},
error: function(e){
alert('error'+e)
}
});
});
}
});
And this is my request.js file
$(document).ready(function(){
$('#customerForm').submit(function(e){
e.preventDefault();
var firstName = $('#firstName').val();
var lastName = $('#lastName').val();
var email = $('#email').val();
var url = $(this).attr('action');
$.post(url,{firstName:firstName,lastName:lastName,email:email}).done(function(response){
console.log('data');
$('#postResultDiv').html(response);
});
});
});
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html;charset= UTF-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src=" /postrequest.js"></script>
<title>Form Submission</title>
</head>
<body>
<h1> Customer Registration</h1>
<div class="container">
<form class="form-inline" th:action="@{/addCustomer}" th:object ="${customerDTO}" id="customerForm" method="POST">
<div class="form-group">
<label for="firstName" style="margin-right:5px">FirstName:</label>
<input type="text" class="form-control" id="firstName" th:field="*{firstName}" placeholder="Enter FirstName"/>
</div>
<div class="form-group">
<label for="lastName" style="margin-left:20px; margin-right:5px">LastName:</label>
<input type="text" class="form-control" id="lastName" th:field="*{lastName}" placeholder="Enter LastName"/>
</div>
<div class="form-group">
<label for="email" style="margin-left:20px; margin-right:5px">Email:</label>
<input type="text" class="form-control" id="email" th:field="*{email}" placeholder="Enter email"/>
</div>
<button type="submit" id ="submitCustomer" class="btn btn-default" style="margin-left:20px; margin-right:5px">Submit</button>
</form>
</div>
<div class="col-sm-7" id="postResultDiv">
</div>
</body>
</html>
这是控制器方法。
@RequestMapping（值=“ / addCustomer”，方法= RequestMethod.POST）
public String submitCustomer( @ModelAttribute CustomerDTO customerDTO, Model model) {
customerService.createCustomer(customerDTO);
List<CustomerDTO> customerDTOS = customerService.getAllCustomers();
model.addAttribute("customerDTOS", customerDTOS);
return "customerList";
}
在这里，我想在网页的表单下输入客户表。 $ .post方法正在工作。但是postrequest.js文件中的$ .ajax方法不起作用。请告诉我postrequest.js文件中的$ .ajax方法有什么问题。