使用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