2013-08-01 68 views
1

我有下面的代碼,在這我想將整個表單轉換爲JSON和使用jQuery AJAX發佈。我的問題是,它進入到Servlet中,我可以在request.getParameter中獲取值,但我仍然得到ajax失敗。一旦我收到回覆,我想顯示返回的回覆並將其顯示在同一頁面上。請幫我找出錯誤的地方。我搜查了很多,但無法將其鏈接到右側。許多提前感謝!JSON,使用jquery ajax後返回失敗

在這裏我的代碼。 ShowHideDiv_ajax.html

<script> 
    $(document).ready(function() { 
    $('#form_submit').click(function (event) { 
     event.preventDefault(); 
     var form = $("#myform"); 
     var json = ConvertFormToJSON(form); 
     $("#results").text(JSON.stringify(json) ); 

     $.ajax({ 
     url: 'AjaxServlet', 
     type: 'POST', 
     dataType: 'json', 
     cache: false, 
     //contentType: 'application/json; charset=utf-8', 
     data: json, 
     success: function(response) { 
      //I want to use this response to be displayed on the same page. 
      alert('success'); 
     }, 
     error: function() { // if error occured 
      alert('fail:'); 
     } 
     }); 

     return false; 
    }); 

    function ConvertFormToJSON(form){ 
     var array = form.serializeArray(); 
     var json = {}; 
     $.each(array, function() { 
     //alert('this.name='+this.name+'this.value='+this.value); 
     if (json[this.name] !== undefined) { 
      if (!json[this.name].push) { 
      json[this.name] = [json[this.name]]; 
      } 
      jsono[this.name].push(this.value || ''); 
     } else { 
      json[this.name] = this.value || ''; 
     } 
     }); 
     return json; 
    } 
    });  
</script> 
<style> 
</style> 
</head> 
<body> 
    <form class="ajax_form" id="myform" name="myform" method="post" action="AjaxServlet" > 
    <table> 
     <tr> 
     <td colspan="2"><div id="error" class="error"></div></td> 
     </tr> 
     <tr> 
     <td>Enter your name : </td> 
     <td> <input type="text" id="name" name="firstname"><br/></td> 
     </tr> 
     <tr> 
     <td>Education : </td> 
     <td> <input type="text" id="education" name="edu"><br/></td> 
     </tr> 
     <tr> 
     <td colspan="2"><div id="info" class="success"></div></td> 
     </tr> 
    </table> 
    </form> 
    <p><tt id="results"></tt></p> 
    <p><tt id="results1"></tt></p> 
    <input class="ajax_button" type="submit" value="Submit" id="form_submit" name="form_submit"> 
</body> 

而且的servelt AjaxServlet.java:

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException 
{ 
    // TODO Auto-generated method stub 
    System.out.println("in post ajaxservlet"); 
    try { 
    String fn, ed=null; 
    fn = request.getParameter("firstname"); 
    ed = request.getParameter("edu"); 
    System.out.println("receieved data:"+fn+ed); 
    if(request.getParameter("firstname").toString()!=null){ 
     fn="Hello User"; 
    } 

    PrintWriter out = response.getWriter(); 
    response.setContentType("text/json"); 
    response.setCharacterEncoding("UTF-8"); 
    out.write(fn); 
    out.close(); 
    System.out.println("data posted"); 
    } catch (Exception e) { 
    // TODO: handle exception 
    e.printStackTrace(); 
    } 
} 

回答

0

AJAX調用具有的dataType設置爲JSON,這意味着它預計要返回JSON。但是,所有返回的信息是「Hello User」。這不是json,可能會導致錯誤。我會嘗試使用HTML而不是「文字/ JSON」

+0

感謝(「text/html的」),並在Java方法中使用的setContentType數據類型!在我改變了你的建議之後,它正在工作。 – user692146

+0

當我複製/粘貼現有​​的ajax POST調用(包含dataType:json選項)並在void [HttpPost]方法上使用它時,我有一個使用.NET Web Api的類似錯誤。經過半天的觀察,發現哪裏出了問題,這指出了我的正確方向。謝謝! – stvn

0

右contenty類型JSON是:

response.setContentType("application/json"); 

再次嘗試改變你的代碼和測試。