1

以下のコードがあります。これで、フォーム全体を JSON に変換し、jquery AJAX を使用して投稿したいと考えています。私の問題は、サーブレットに入り、request.getParameterで値を取得できることですが、それでも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>

そして、サーベルト 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();
  }
}
4

2 に答える 2