Question

我试图让用户插入一个customer_id，然后使URL转到该页面。

在http://localhost:8080/viewCustomer.html上，我希望用户输入customer_id，然后要URL转到http://localhost:8080/customers/ {customer_id}。

我尝试在此处查看解决方案，但它们不起作用。

我得到的结果URL是“ http://localhost:8080/viewCustomer.html?customer_id=1”

这是我的代码：

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <script>
//            $("#submit").submit(function (event) {
//                $customer_id = $_POST["customer_id"];
//                var newURL = 'http://localhost:8080/customers/' + $customer_id;
//                xhttp.open("GET", newURL, true);
//                xhttp.send();
//            }
//            );

        function changeFormAction() {
            window.location.href = "http://localhost:8080/" + document.getElementById("customer_id");  
        }

    </script>
</head>
<body>
    <h1>Bank Management - View Customer</h1>
    <h3>Please complete of the following:</h3>
    <form onsubmit="changeFormAction()">

        Customer ID:<br>
        <input type="text" name="customer_id" id="customer_id">
        <br>
        <button type="submit" onclick="">Submit</button>
    </form>
</body>
</html>

Answer 1

您已经包括了两个古老的jQuery版本。您只应包含一次jQuery，并且理想情况下使用最新版本。

完成此操作后，代码将按以下方式工作-您需要为表单提供一个ID，在 form 上处理“提交”（按钮没有Submit事件），停止默认的回发行为，并使用jQuery的$ .ajax（）轻松发送ajax请求。

<head>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
     <script>
       $(function() {
         $("#customerForm").submit(function(event) {
             event.preventDefault();
             $.ajax({
               type: "GET",
               url: "http://localhost:8080/customers/" + $("#customer_id").val(),
             }).done(function(response) {
               console.log(response);
             }).fail(jqXHR, textStatus) {
               alert( "Request failed: " + textStatus );
             });
         });
      });
    </script>
</head>
<body>
    <h1>Bank Management - View Customer</h1>
    <h3>Please complete the following:</h3>
    <form id="customerForm">
        Customer ID:<br>
        <input type="text" name="customer_id" id="customer_id">
        <br>
        <button type="submit">Submit</button>
    </form>
</body>

以下是一些相关的文档链接：

http://learn.jquery.com/using-jquery-core/document-ready/

https://api.jquery.com/submit/

https://api.jquery.com/event.preventdefault/

https://api.jquery.com/jquery.ajax/

JavaScript / Ajax-转到包含表单内容的URL

1 个答案: