Senden Sie das Formular an servlet mit Hilfe von JQuery Ajax

Wie können wir uns Bilden, servlet, wenn wir klicken auf span-tag mit Jquery, Ajax und get-Ausgabe von servlet?
Unten ist Rechner-Beispiel-code.
Wenn anstelle von span, wenn ich input type="submit" bekomme ich das richtige Ergebnis in index.html aber wenn ich mit span-statt der input-Typ submit, ich bin gerichtet auf servlet-Seite.

index.html

<form name="form1" method="POST" action="Ajaxexample" id="form1">
  <table>
   <tr>
     <td>Number 1</td><td><input type="text" name="n1"/></td>
   </tr>
   <tr>
     <td>Number 2</td><td><input type="text" name="n2"/></td>
   </tr>
    <tr>
     <td></td><td><span onclick="form1.submit()">Calculate</span></td>
    </tr>
     <tr>
       <td>Result</td><td><input type="text" value="" id="result"/></td>
     </tr>
    </table>
 </form>
    <script src="script/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">

    var form = $('#form1');
    form.submit(function () {

     $.ajax({
     type: form.attr('method'),
     url: form.attr('action'),
     data: value,
     success: function (data) {
     var result=data;
     $('#result').attr("value",result);
     }
     });
     return false;
     });
     </script>

Ajaxexample.java

     protected void doGet(HttpServletRequest request, HttpServletResponse response)throws 
     ServletException, IOException {
         response.setContentType("text/html;charset=UTF-8");
         PrintWriter out = response.getWriter();

         int n1 = Integer.parseInt(request.getParameter("n1"));
         int n2 = Integer.parseInt(request.getParameter("n2"));

        out.println(n1 + n2 + "");

       }
       }

web.xml

      <display-name>Ajax</display-name>
     <welcome-file-list>
      <welcome-file>index.html</welcome-file>
       <welcome-file>index.htm</welcome-file>
       <welcome-file>index.jsp</welcome-file>
      <welcome-file>default.html</welcome-file>
     <welcome-file>default.htm</welcome-file>
      <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
     <servlet>
         <servlet-name>Ajaxexample</servlet-name>
         <servlet-class>Ajaxexample</servlet-class>
         </servlet>
         <servlet-mapping>
         <servlet-name>Ajaxexample</servlet-name>
         <url-pattern>/Ajaxexample</url-pattern>
         </servlet-mapping>

Was ist "Wert" und wie wollen Sie Draht, span.

InformationsquelleAutor CY5 | 2013-12-14

0

Haben Sie klar geschrieben " onclick="form1.submit()">" das ist, warum die form der Einreichung....

Entfernen onClick () - Methode aus senden &
```
     <span id="calc">Calculate</span
```
& ersetzen
```
    form.submit(function () {
```
Linie durch
```
      $( "#calc" ).click(function(){
```
Danke für die Hilfe, ich habe, wie vorgeschlagen, und ich geändert haben, POST zu ERHALTEN und auch verändert Daten:Wert Daten:form.serializable innen ajax, ich bin noch immer Fehler wie GET localhost:8080/Ajax/Ajaxexample [HTTP/1.1 500 Internal Server Error 19ms]
Danke für die Hilfe, ich habe es
schön zu hören, dass.ich könnte dir helfen....

InformationsquelleAutor Kuldeep Choudhary

<span onclick="formSubmit();">Calculate</span>

function formSubmit(){

 $.ajax({
     url:'localhost:8080/Ajax/Ajaxexample',
     data: $("#form1").serialize(),
     success: function (data) {
            $('#result').html(data);
    }
});
}

Danke für die Hilfe, ich habe es

InformationsquelleAutor user3068680

2

Sie form Methode post ist <form name="form1" method="POST" action="Ajaxexample" id="form1"> aber Sie schreiben codes, die in der servlet doGet() so dass Sie möglicherweise nicht die richtigen Ergebnisse.Denken Sie daran, dass, wenn die form-Methode ist get dann in der servlet - doGet() aufgerufen werden und wenn die form-Methode ist post dann in der servlet doPost() aufgerufen werden

Danke, habe ich geändert-POST zu BEKOMMEN, aber es funktioniert immer noch nicht und auch geänderte Daten:Wert Daten:form.serializable innen ajax, ich bin immer Fehler wie GET localhost:8080/Ajax/Ajaxexample [HTTP/1.1 500 Internal Server Error 19ms]
Die syntax ist data:{parametername:parametervalue}
Danke für die Hilfe, ich habe es

InformationsquelleAutor SpringLearner

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.