/minip.jpg

技术博客分享

基于JavaVueuniapp微信小程序商品展示系统设计和实现

/weixin_miniapp.png

基于Java+Vue+uniapp微信小程序商品展示系统设计和实现

博主介绍 全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战

jquery传输文件到后端,后端处理数据

/weixin_miniapp.png

jquery传输文件到后端,后端处理数据。

<!--HTML代码-->
<input type="file" name="uploadFile" id="uploadFile">
<!--JQuery代码-->
$("#uploadFile").on("change", function() {

		debugger;
		var obj=$("#uploadFile")[0].files;
		var formData = new FormData();                      // 创建一个form类型的数据

		formData.append('file',obj[0]);     // 获取上传文件的数据

		$.ajax({

			"url": "",

			"type": "",

			"processData": false, // 将数据转换成对象,不对数据做处理,故 processData: false

			"contentType": false,    // 不设置数据类型

			"xhrFields": {                // 这样在请求的时候会自动将浏览器中的cookie发送给后台

				withCredentials: true

			},

    		"data": formData,

			success: function(data) {

				console.log(data)

			},

			error: function(data) {

			}

		})

	})

后端代码

使用jQuery与后端进行数据传输代码示例

/weixin_miniapp.png

使用jQuery与后端进行数据传输代码示例

1.编写前端页面 + Ajax请求

  • 表单域 form (三大部分:form、表单域、提交按钮 type=“submit”。 每个input需要有名字!否则无法被serialize()添加进数据中)
  • 为submit添加on监听事件。1.阻止默认行为 2.通过 form选择器.serialize( )把表单的所有数据添加进data中(务必每个input都有个name属性)
  • 通过jquery发送ajax请求!规定好url、type、method、data、success等等
  • 特别注意:若后端返回的是 @ResponseBody String 则 type=”text“ ; 若后端返回的是json,则type=”JSON“
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.4.1.js"></script>
    <script>
        $(function(){
            $('form').on('submit',function(e){
                //Step1.阻止submit的默认行为
                e.preventDefault();

                //Step2.获取表单内所有的数据【各个input 一定要有name属性!】
                var str = $('form').serialize();

                //Step3.发送Ajax请求
                $.ajax({
                    url: "http://localhost:9090/test", //后端地址
                    type: "text",       //提交方式
                    method: "GET",
                    data: str,
                    dataType: "text",       //规定请求成功后返回的数据
                    success: function (data) {
                        //请求成功之后进入该方法,data为成功后返回的数据
                        console.log(data);
                        console.log("发送ajax成功");
                    },
                    error: function (errorMsg) {
                        console.log(errorMsg);
                        console.log("发送ajax失败");
                    }
                });

            })
        })
    </script>
</head>
<body>
    <form>
        <input type="text" name="name" value="" placeholder="name">
        <input type="text" name="age" value="" placeholder="age">
        <button type="submit">submit</button>
    </form>
</body>
</html>

2.编写后端响应(只说明数据交换部分。详细知识点请看后端的SpringMVC、Springboot 等笔记)

Hadoop开源云计算平台

/weixin_miniapp.png

Hadoop开源云计算平台

《Hadoop开源云计算平台》首先介绍了云计算的基本概念以及谷歌云计算的关键技术,然后全面系统地介绍了实现云计算关键技术层的理想开源工具Hadoop及其应用。本书阐述了Hadoop中每个部分的实现机制与用法,包括HDFS、Hadoop FS shell、Map/Reduce、Hadoop流与管道机制、Hadoop I/…