ローカルホストでjQueryとAjaxを使用してサーバーからXML応答を処理できませんか？

データベースに格納されたデータをXML形式で返すREST APIを作成しました。ローカルホストでjQueryとAjaxを使用してサーバーからXML応答を処理できませんか？

localhostでコードを実行すると応答は正しいですが、htmlページでAjaxとjQueryを使用して同じリンクにアクセスしようとすると、応答やエラーメッセージが表示されません。

私は間違っていますか？

<html> 
<head> 
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script> 

    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#search").click(function(){ 
      fetch(); 
     }); 
    }); 
    function fetch(){ 
     var c=$("#description").val(); 
     $.ajax({ 
      url:"http://localhost:8085/lostandfound/webapi/lost/"+c, 
      type:"GET", 
      datatype:"XML", 
      success:function(data){ 
       $("#result").children().remove(); 
       $(data).find("found").each(function(){ 
        var info="<tr><td>name"+$(this).find("name").text()+"</td> </tr>"; 
        $("#result").append(info); 
       }); 
      }, 
      error: function() { 
       $('#output').html('<p>An error has occurred</p>'); 
      } 
     }); 
    } 

    </script> 
</head> 
<body> 
    <div id="addResultDiv" style="color: red"></div> 
    <h2>search</h2> 
    <p id="demo"></p> 
    <form id="userForm"> 
     <table id="result"> 
      <tr> 
       <td>item:</td> 
       <td><input type="text" name="description" id="description" /> 
       </td> 
      </tr> 
      <tr> 
       <td><input type="submit" value="search" id="search" /></td> 
       <td><input type="submit" value="clear" id="clear"/></td> 
      </tr> 
     </table> 
    </form> 
    <div id="output">Search Result will Appear here!</div> 
</body> 
</html>

出典

2016-05-24 ksk

最後の 'div'タグを正しく入力してください。 '<'の後ろにスペースを入れてはいけません。 – trincot

デバッグ中にブラウザのページインスペクタでxmlデータを確認できますか？ – Pushpendra

はい私は、Javaで書かれた安らかなwebserviceで指定されているように、私はリンクにアクセスするときは、tomcatを使用して私はXMLデータを表示することができる – ksk

送信ボタンをクリックすると、JavaScriptが実行されます。

JavaScriptはAjaxリクエストを開始します。

JavaScriptが実行されるとすぐに、サブミットボタンはサブミットボタンの機能を行います。フォームを送信します。ブラウザは新しいページを読み込みます。 Ajaxリクエストが実行中の環境はになり、になります。

Ajaxを機能させたい場合は、送信ボタンの通常の動作を停止します。

$("#search").click(function(event){ 
    event.preventDefault(); 
    fetch(); 
});

出典

2016-05-24 13:31:22 Quentin

入力タイプを「送信」から「ボタン」に変更します。これにより、ページのリロードは発生しません。

<input type="button" value="search" id="search" />

出典

2016-05-24 13:37:08 Pushpendra

ローカルホストでjQueryとAjaxを使用してサーバーからXML応答を処理できませんか？

答えて

関連する問題