简体   繁体   English

Spring Boot,Mongodb,jQuery Ajax和Java

[英]Spring boot, Mongodb, jquery ajax and java

I had sample application which enables the user to search a customer with it and shows all the customers from the Mongodb (and it works well), so i tried to upgrade the application so that the user can add, update and delete a customer with an id. 我有一个示例应用程序,该应用程序使用户可以使用它搜索客户并显示Mongodb中的所有客户(并且效果很好),因此我尝试升级该应用程序,以便用户可以使用以下方式添加,更新和删除客户: ID。

I tried several ways to add and delete a new customer. 我尝试了几种添加和删除新客户的方法。 However, it does react for that. 但是,它确实对此做出了反应。 How to fix that My FULL CODE 如何修复我的完整代码

My html page 我的html页面

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
    <input name="search" type="text" maxlength="100" id="search"/>
    <button onclick="searchID()"> Search ID </button>
    <button onclick="showAll()"> Show All </button>

    <div id="persons"></div>

    <script>
        function searchID()
        {
            var id = document.getElementById("search").value;
            $("#persons").html("");


            $.getJSON("http://localhost:8080/customers/" + id,  function(data)
            {
                for (var i in data) {
                    $('#persons').append("<p>ID: " + data[i].id + "</p>")
                    $('#persons').append("<p>First name: " + data[i].firstName + "</p>")
                    $('#persons').append("<p>Last name: " + data[i].lastName + "</p><br>")
                }
            });


        }

        function showAll()
        {
            $("#persons").html("");

            $.getJSON("http://localhost:8080/customers/",  function(data)
            {
                for (var i in data) {
                    $('#persons').append("<p>ID: " + data[i].id + "</p>")
                    $('#persons').append("<p>First name: " + data[i].firstName + "</p>")
                    $('#persons').append("<p>Last name: " + data[i].lastName + "</p><br>")
                }
            });
        }
    </script>
        <h2>Add Customer</h2>
        <form action="http://localhost:8080/customers" method="POST">
                        ID <input type="text" id="id" name="id" /><br />
            FirstName <input type="text" id="firstName" name="firstName" /><br />

                        LastName <input type="text" id="lastName" name="lastName" /><br />

            <input type="submit" />
        </form>
        <h3>Update a customer</h3>
        <form action="http://localhost:8080/updateCustomer" method="POST">
                        ID <input type="text" id="id" name="id" /><br />
            FirstName <input type="text" id="firstName" name="firstName" /><br />

                        LastName <input type="text" id="lastName" name="lastName" /><br />

            <input type="submit" />
        </form>
        <h4>Delete a customer</h4>
        <form action="http://localhost:8080/deleteCustomer" method="POST">
                        ID <input type="text" id="id" name="id" /><br />
             <input type="submit" />
        </form>

</body>
</html>

Apart of my CustomerRestController class: 除了我的CustomerRestController类:

@RestController
public class CustomerRestController 
{

    @Autowired
     CustomerMongoRepository customerRepository;
    @Autowired
    private CustomerDAO customerDAO;

    @CrossOrigin
    @GetMapping("/customers")
    public ArrayList<Customer> getCustomers()
    {
        customerDAO = new CustomerDAO();
        return customerDAO.getCustomers();
    }

    @CrossOrigin
    @GetMapping("/customers/{id}")
    public ArrayList<Customer> getCustomer(@PathVariable("id") int id)
    {
        customerDAO = new CustomerDAO();
        return customerDAO.get(id);
    }  

    @RequestMapping(method = POST)
    @ResponseStatus(CREATED)
    public void createCustomer(@RequestBody Customer customer,
            HttpServletResponse response) {

        customerDAO.save(customer);
        response.setHeader("Location", String.format("/rest/customers/%s",
                customer.get(id)));
    }

    @RequestMapping(value = "/{id}", method = GET)
    @ResponseBody
    public Customer showCustomer(@PathVariable Customer.id id) {

        return customerDAO.findBy(id);
    }

    @RequestMapping(value = "/{id}", method = PUT)
    @ResponseStatus(OK)
    public void updateCustomer(@RequestBody Customer customer) {

        customerDAO.save(customer);
    }

    @RequestMapping(value = "/{id}", method = DELETE)
    @ResponseStatus(OK)
    public void deleteCustomer(@PathVariable Customer.id id) {

        customerDAO.delete(id);
    }

}

It seems you don't have a controller method to handle the view request: 似乎您没有控制器方法来处理视图请求:

@RequestMapping(value = "/{id}", method = DELETE)
@ResponseStatus(OK)
public void deleteCustomer(@PathVariable Customer.id id) {

    customerDAO.delete(id);
}

You are expecting DELETE /uid but your view sends POST /deleteCustomer : 您期望DELETE /uid但是您的视图发送POST /deleteCustomer

<h4>Delete a customer</h4>
<form action="http://localhost:8080/deleteCustomer" method="POST">
                ID <input type="text" id="id" name="id" /><br />
     <input type="submit" />
</form>

Change your controller to: 将您的控制器更改为:

@RequestMapping(value = "/deleteCustomer", method = POST)
@ResponseStatus(OK)
public void deleteCustomer(@RequestParam String id) {
    customerDAO.delete(id);
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM