2016-05-09 10 views
0

Submitをクリックした後、div usersにデータをロードします。私はこの目的のためにajaxを使用します。問題は、http://localhost:8080/myprj/showUsersがこのコンテンツをdivに読み込むのではなく、ボタンクリックイベントで開かれていることです。現在のページのDIVにJSPをロードするのではなく、新しいJSPページが開かれます

Context.jsp

<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%> 
<html> 
<head> 
<script type="text/javascript"> 
function loadAjax() {  
    $.ajax({ 
     url: "context.do", 
     success: function(result) { 
      $("#users").html(result); 
     }, 
     error : function(e) { 
      alert('Error: ' + e); 
     } 
    }); 
} 
</script> 
</head> 
<body> 

<h2>Context information</h2> 
<form:form method="POST" action="/myprj/showUsers"> 
<table> 
    <tr> 
     <td><form:label path="weather">Weather</form:label></td> 
     <td><form:input path="weather" /></td> 
    </tr> 
    <tr> 
     <td><form:label path="companions">Companions</form:label></td> 
     <td><form:input path="companions" /></td> 
    </tr> 
</table> 
     <table border="1" cellspacing="1" align="center" style="margin-top: 160px;"> 
      <tr> 
       <th>Weather</th> 
       <th>Companions</th> 
      </tr> 
      <tr> 
       <td>${weather}</td> 
       <td>${companions}</td> 
      </tr> 
     </table> 

<input type="submit" value="Submit" onclick="loadData()" /> 

</form:form> 

<div id = "users"></div> 

</body> 
</html> 

コントローラ

@Controller 
public class Test1 { 

    @RequestMapping(value = "/context", method = RequestMethod.GET) 
    public ModelAndView context() { 
     return new ModelAndView("context", "command", new Context()); 
    } 

    @RequestMapping(value = "/showUsers", method = RequestMethod.POST) 
    public String showUsers(@ModelAttribute("SpringWeb")Context context, ModelMap model) { 
     model.addAttribute("weather", context.getWeather()); 
     model.addAttribute("companions", context.getCompanions()); 
     return "result"; 
    } 

} 
+1

ボタンのデフォルト動作を上書きしていません。あなたは実際にフォームを提出していません。 http://stackoverflow.com/questions/30467717/ajax-servlet-issue/30470465#30470465 –

答えて

0

まずloadData()機能は、あなたのコードでは使用できません。

type="submit"の代わりにtype="button"を次のように使用します。

button JavaScriptエラーがページになると、エラーを記録する以外は何もしません。

submitについては、エラーが発生したかどうかをページに送信します。

<input type="button" value="Submit" onclick="loadAjax()" /> 
+0

私はこれらの変更を行いました。送信をクリックすると、何も起こりません。 – Klue

+0

はあなたの 'loadAjax()'関数呼び出しですか?はいの場合は、ブラウザのコンソールにチェックが入っていれば、javascriptエラーが発生しています。 – Srinu

関連する問題