Javascript(jQuery库的使用)

语法分析：

1. $(document).ready(function() {...});

   • 目的：这是一个jQuery方法，确保它内部的代码只在DOM（文档对象模型）完全加载后运行。
   • #：$(document).ready()是一个jQuery语法，其中$是一个jQuery选择器，document选择整个HTML文档。
   • 解释：一旦HTML文档被完全加载，就会将一条消息记录到控制台。

   • $(document).ready(function() {
       console.log("DOM is fully loaded and ready to be manipulated");
     });
     

2. $('#uploadForm').submit(function(e) {...});

   • 目的: 这行代码的作用是在网页上的一个特定表单（ID为'myForm'）上设置一个特殊的功能:  当这个表单被提交的时候，这个功能就会被执行。
   • 如何工作: 这里用到了一个叫做jQuery的工具。通过 $('#uploadForm') 这部分代码，我们找到了网页上ID为'uploadForm'的表单。
   • 然后 .submit(...) 这部分是在说：“当这个表单被提交时，执行接下来的代码（即括号里的内容）”。
   • 说明：这将阻止默认提交ID为myForm的表单，并显示一个警报。

   • $(document).ready(function() {
       $('#myForm').submit(function(e) {
         e.preventDefault();
         alert("Form submitted!");
       });
     });
     

3. e.preventDefault();

   • 目的：防止表单提交的默认操作。这用于阻止表单以传统方式提交，允许我们使用AJAX来处理它。
   • e是传递给函数的事件对象。preventDefault()是事件对象的方法。
   • 示例代码：同上。它在事件处理函数中使用，以防止默认操作（如表单提交或链接重定向）

4. var formData = new FormData(this);

   • 目的：创建新的FormData对象。它用于保存要发送的表单数据。
   • #：FormData是一个用于保存表单值的JavaScript对象。this是指触发提交事件的表单元素。

5. $.ajax({...});

   • 目的: 这段代码的作用是向服务器发送一个网络请求，而且这个请求是“异步”的，意味着它不会干扰网页上的其他操作。
   • 如何工作: 在 $.ajax({...}) 这部分代码中，我们使用了jQuery的一个功能来设置和发送网络请求。这个请求可以包含很多不同的设置项（在花括号 {...} 里面），比如

   •         $.ajax({
                 url: '/upload', //指定请求发送到的URL。
                 type: 'POST',   //设置HTTP请求的方法。
                 data: formData, //是与请求一起发送的数据。
                 contentType: false,  // 告诉jQuery不要设置任何内容类型头。
                 processData: false,  // 防止jQuery将数据转换为查询字符串。
                 success: function(data) {
                     $('#result').html(data.message);
                 }
             });

6. 在success函数中：

   • 目的: 这段代码用来处理服务器响应请求后返回的数据。
   • 如何工作: 当请求成功，服务器返回数据后，$('#result').html(data.message); 这行代码会执行。

$(document).ready(function() {
    $('#uploadForm').submit(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            url: '/upload', //指定请求发送到的URL。
            type: 'POST',   //设置HTTP请求的方法。
            data: formData, //是与请求一起发送的数据。
            contentType: false,  // 告诉jQuery不要设置任何内容类型头。
            processData: false,  // 防止jQuery将数据转换为查询字符串。
            success: function(data) {
                $('#result').html(data.message);
            }
        });
    });
});