SpringMVC環境におけるJSONのAjax非同期リクエストメソッド

今回は SpringMVC 環境で Ajax を介して JSON を非同期リクエストする方法について説明します。 SpringMVC 環境で Ajax が JSON を非同期リクエストする場合の 注意事項 は何ですか。実際のケースを見てみましょう。

1つの環境構築

1つ目は従来のspring mvc環境構築です。言うまでもなく、ここではjackson関連のjarパッケージを導入し、次にspring

設定ファイルに導入する必要があることに注意する必要があります。 "springmvc-servlet.xml "に json 解析関連の設定を追加します。" に、私の完全なコードは次のとおりです:

<?xml  version="1.0" encoding="UTF-8"?>
<beans xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemalocation="http://www.springframework.org/schema/beans 
http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
http://www.springframework.org/schema/context 
http://www.springframework.org/schema/context/spring-context-4.0.xsd
http://www.springframework.org/schema/mvc 
http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd">
<!-- 避免IE执行AJAX时,返回JSON出现下载文件 -->
<bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
<property>
<list>
<value>text/html;charset=UTF-8</value>
<value>application/json;charset=UTF-8</value>
</list>
</property>
<property>
<bean>
<property>
<bean>
<constructor-arg></constructor-arg>
</bean>
</property>
</bean>
</property>
</bean>
<!-- 启动Spring MVC的注解功能，完成请求和注解POJO的映射 -->
<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
<property>
<list>
<ref></ref><!-- json转换器 -->
</list>
</property>
</bean>
<annotation-driven content-negotiation-manager="contentNegotiationManager"></annotation-driven>
<bean class="org.springframework.web.accept.ContentNegotiationManagerFactoryBean">
<!-- true，开启扩展名支持，false关闭支持 -->
<property></property>
<!-- 用于开启 /userinfo/123?format=json的支持 -->
<property></property>
<!-- 设置为true以忽略对Accept Header的支持 -->
<property></property>
<property>
<value>
atom=application/atom+xml
html=text/html
json=application/json
xml=application/xml
*=*/*
</value>
</property>
</bean>
<annotation-config></annotation-config>
<!-- 启动自动扫描该包下所有的Bean(例如@Controller) -->
<component-scan></component-scan>
<default-servlet-handler></default-servlet-handler>
<!-- 定义视图解析器 -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property></property>
<property value="org.springframework.web.servlet.view.JstlView"></property>
<property></property>
<property></property>
<property></property>
</bean>
</beans>

プロジェクト構造:

注: ここでテストに使用した完全な jar パッケージ: http ://pan.baidu.com/s /1dEUwdmL

2 つのテスト例

(1) WEB-INF/jsp ディレクトリに、単純な jQuery ajax リクエストを含む新しいindex.jsp ファイルを作成します。リクエストデータの形式はJSON、具体的なコードは以下のとおりです:

<meta>
<base>">
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<script></script>
<title>jQuery i18n</title>
<script>
$().ready(
function() {
$("#sub").click(
function() {
var name = $("#username").val();
var age = 18;
var user = {"username":name,"age":age};
$.ajax({
url : &#39;hello.json&#39;,
type : &#39;POST&#39;,
data : JSON.stringify(user), // Request body 
contentType : &#39;application/json; charset=utf-8&#39;,
dataType : &#39;json&#39;,
success : function(response) {
//请求成功
alert("你好" + response.username + "[" + response.age + "]，当前时间是：" + response.time + "，欢迎访问：http://www.zifangsky.cn");
},
error : function(msg) {
alert(msg);
}
});
});
});
</script>


<input style="width: 100px; height: 30px; font-size: 20px; font-weight: bold;">
<input style="height: 40px; height: 30px;">
<br>

(2) 単純なモデルクラス User、コードは次のとおりです:

package cn.zifangsky.controller;
public class User {
private String username;
private int age;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public int getAge() {
return age;
}
public void setAge(int age) {
this.age = age;
}
}

(3) コントローラクラス TestController.java:

package cn.zifangsky.controller;
import java.text.Format;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
import org.springframework.context.annotation.Scope;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
@Controller
@Scope("prototype")
public class TestController {
/**
* 转到页面
*/
@RequestMapping(value = "/hello.html")
public ModelAndView list() {
ModelAndView view = new ModelAndView("index");
return view;
}
/**
* ajax异步请求， 请求格式是json
*/
@RequestMapping(value = "/hello.json", method = { RequestMethod.POST })
@ResponseBody
public Map<string> hello(@RequestBody User user) {
// 返回数据的Map集合
Map<string> result = new HashMap<string>();
Format format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
// 返回请求的username
result.put("username", user.getUsername());
// 返回年龄
result.put("age", String.valueOf(user.getAge()));
// 返回当前时间
result.put("time", format.format(new Date()));
return result;
}
}</string></string></string>

させてください具体的な実行手順について簡単に説明します:

i) プロジェクトが開始されたら、ブラウザーで http://localhost:8089/SpringDemo/hello.html にアクセスします。その後、コントローラーで list メソッドが実行されます。次に、/WEB-INF/jsp/index.jsp に移動します (PS: コントローラーで返されるのは論理ビューであり、 springmvc-servlet.xml ファイルで定義されたパスのプレフィックスとサフィックスで結合されます)ファイルの実際のパスを合成します)

ii) Index.jsp ページにテキストを入力し、ボタンをクリックすると、Ajax リクエストがトリガーされます。このリクエストは、入力ボックス内のデータと、デフォルトの「age」パラメータとスプライスを取得します。それを json 形式の文字列に変換し、最後に「hello.json」リクエストに送信します。これは、コントローラーで hello メソッドを実行することになります

iii) hello メソッド 実行が完了すると、一連のデータが返され、最後にページに表示されます

(4) 効果は次のとおりです:

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP に関する他の関連記事に注目してください。中国語のサイトです！

推奨読書:

ajaxを使用して複数のパラメータを渡す方法

フォームJSON変換を実装するためにAJAXを構築する方法

以上がSpringMVC環境におけるJSONのAjax非同期リクエストメソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。