前端小结–ajax和spring互传json对象，并显示到列表中

通常java后台传给前端参数可以用model，modelmap,modelmapandview等，但是在有些场合ajax提交时，需要利用json传递实体对象，这里给出一个实例记录一下。完整代码下载链接：
http://download.csdn.net/download/yhhyhhyhhyhh/9970542
PS: 关于ajax处理返回的json数据，除了html拼接，有没有其他的好用的看着舒服的方法？？？

环境

eclipse4.7.0，jdk1.8，maven，spring4.3.0，jackjson2.8.0。

1.配置

1.1maven添加jackjson jar包

jackson-core，jackson-databind，jackson-annotations

1.2.在springContext中，添加如下关于json解析对象的部分

<!--解析JSON对象 -->
    <mvc:annotation-driven />
        <!--下面屏蔽的部分不要也行好像，没去深入研究 -->
    <!--<bean class="org.springframework.web.servlet.mvc.method.annotation.RequestMappingHandlerAdapter"> <property name="messageConverters"> <list> <ref bean="mappingJacksonHttpMessageConverter" /> </list> </property> </bean>-->
    <bean id="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJackson2HttpMessageConverter">
        <property name="supportedMediaTypes">
            <list>
                <value>text/html;charset=UTF-8</value>
            </list>
        </property>
    </bean>

1.3controller中如下;

/* * 测试前端向后端传json 对象，并返回json */
    @RequestMapping(value = "/testJson1",method = RequestMethod.POST)
    @ResponseBody
    public List<Employeer> testJson1(@RequestBody Employeer employeer)  {
        System.out.println(employeer.getName() + " " + employeer.getSex());
        // 对前端json数据做其它处理，这里直接返回
        List<Employeer> employeerList=new ArrayList<Employeer>();
        employeerList.add(employeer);
        employeerList.add(employeer);
        employeerList.add(employeer);
        return employeerList;
    }

2.前端

2.1引入jquere

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

2.2ajax提交数据

ajax函数例子如下：

<script type="text/javascript"> $("#login").click(function() { var htmlContent = ""; $.ajax({ url : "testJson1",type : "POST",dataType : "json",contentType : "application/json;charset=UTF-8",data : JSON.stringify({ name : $("#name").val(),sex : $("#sex").val(),position : $("#position").val() })，////这里是json对象数据 success : function(result) { ///////这里是对返回json对象的处理 $("#tb tr:not(:first)").html(""); alert(JSON.stringify(result)); for (var i = 0; i < result.length; i++) { htmlContent += "<tr style=‘text-align: center‘> " htmlContent += "<td style=‘text-align: center‘>" + result[i].name + "</td>" htmlContent += "<td style=‘text-align: center'>" + result[i].sex + "</td>" htmlContent += "</tr>" } $('#tb').append(htmlContent); },error : function(result) { alert("error!"); } }); }); </script>

3.测试

ajax提交后，返回的jsond对象数组

显示到列表中