使用Ajax無法在同一頁面上獲得響應

Question

嗨，我正在一個項目中，我正在使用Ajax在同一頁面上顯示輸出。 它包含一個JSP表單，該表單接受用戶輸入並將輸入存儲到數據庫中，為此，我想顯示一條成功消息。

但是我沒有在同一頁面上收到該消息。

JSP代碼：-我嘗試同時使用get和post方法，但沒有用。 單擊添加按鈕時，如果在同一頁面上成功插入了記錄，則應該顯示一條成功消息，但是我在另一頁面上收到了該消息。

請幫助解決此問題。 這是我第一次使用Ajax。 我們需要對web.XML文件進行任何更改嗎？

`

<!DOCTYPE html>
    <html>

            <head>
            <title>Courses</title>


          <script>
                var request;
                function addDetails(){
                    request=new XMLHttpRequest();
                    request.onreadystatechange()=getResult();
                    var cid=document.getElementById("cid").value;
                    var name=document.getElementById("name").value;
                    var syllabus=document.getElementById("syllabus").value;
                    var duration=document.getElementById("duration").value;
                    var fees=document.getElementById("fees").value;

                    request.open("get","Courses?cid="+cid,"name="+name,"syllabus="+syllabus,"duration="+duration,"fees="+fees,true);
                    //request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                    //request.send(cid&name&syllabus&duration&fees);
                    request.send();
                }

                function getResult(){
                    if(request.readyState===4&&request.status===200){
                        var result=request.responseText();
                        document.getElementbyID("output").innerHTML=result;
                    }
                    else{
                        document.getElementbyID("output").innerHTML="Error";
                    }

                }



                </script>
                <style>
                body {
                    text-align:center;
                }
                h1 {
                    font-size:30px;
                    font-weight:bold;
                    color:peru;
                }
                pre {

                    font-size:20px;
                    font-weight:bold;
                    color:black;
                }

            </style>
        </head>
        <body>
            <h1>Course Information</h1><br/>
            <form action="Courses" method="Post">
                <pre>
            Course ID    : <input type="text" name="cid" id="cid" style="width:400px"/><br/>
            Course Name  : <input type="text" name="name" id="name" style="width:400px"/><br/>
            Syllabus     : <input type="text" name="syllabus" id="syllabus" style="width:400px"/><br/>
            Duration     : <input type="text" name="duration" id="duration" style="width:400px"/><br/>
            Fees         : <input type="text" name="fees" id="fees" style="width:400px"/><br/>
            <input type="submit" name="Add" value="Add" onclick="addDetails()"/> <input type="submit" name="Update" value="Update"/> <input type="submit" name="Delete" value="Delete"/>
            <p id="output"></p>
                </pre>
            </form>
        </body>
    </html>

Servlet代碼：

package ss;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class Courses extends HttpServlet {

        protected void processRequest(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        response.setContentType("text/html;charset=UTF-8");
       PrintWriter out = response.getWriter();
            try{
            String cid=request.getParameter("cid");
            String name=request.getParameter("name");
            String syllabus=request.getParameter("Syllabus");
            String duration=request.getParameter("duration");
            String fees=request.getParameter("fees");

            Class.forName("com.mysql.jdbc.Driver");
            Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/ssi","root","root17");

            if(request.getParameter("Add")!=null){
                String qry="insert into course values(?,?,?,?,?)";
                PreparedStatement ps=con.prepareStatement(qry);
                ps.setString(1, cid);
                ps.setString(2, name);
                ps.setString(3, syllabus);
                ps.setString(4, duration);
                ps.setString(5, fees);
                int i=ps.executeUpdate();
                   if(i>0){
                       out.println("Registered Successfully");
                   }
                   else{
                       out.println("Registration Fails");
                   }
            }

        if(request.getParameter("Update")!=null){
            String qry="UPDATE course SET Name=?,Duration=?, syllabus=?, fees=? where cid=?";
            PreparedStatement ps=con.prepareStatement(qry);
            ps.setString(1,name);
            ps.setString(2,duration);
            ps.setString(3,syllabus);
            ps.setString(4, fees);
            ps.setString(5, cid);
            int i=ps.executeUpdate();
            if(i>0){
                out.println("Updated Successfully");
                out.println(i);

            }
            else{
                out.println("Update fails");
            }
        }
        if(request.getParameter("Delete")!=null){
            String qry="Delete from course where cid=?";
            PreparedStatement ps=con.prepareStatement(qry);
            ps.setString(1, cid);
            int i=ps.executeUpdate();
            if(i>0){
                out.println("Record Deleted");
            }
            else{
                out.println("Delete Fails");
            }
        }
       }  
            catch(Exception e){
                out.println(e);
            }

           }


}

Answer 1

您將addDetails附加到提交按鈕。 單擊后，它將提交您最有可能不想發生的頁面。 將類型更改為僅按鈕： <input type="button" name="Add" value="Add" onclick="addDetails()"/> 。

使用Ajax無法在同一頁面上獲得響應

問題描述

1 個解決方案

解決方案1
0 2017-11-24 22:27:07

使用Ajax無法在同一頁面上獲得響應

問題描述

1 個解決方案

解決方案1 0 2017-11-24 22:27:07

解決方案1
0 2017-11-24 22:27:07