ajax 如何带文件发送请求_jquery 简单使用和发送 ajax 异步请求

最新推荐文章于 2024-08-20 10:07:57 发布

了脚喵

最新推荐文章于 2024-08-20 10:07:57 发布

阅读量194

点赞数

文章标签： ajax 如何带文件发送请求

本文链接：https://blog.csdn.net/weixin_36370851/article/details/113041976

版权

jquery 的简单使用。需要引入 js 文件。

jquery 获取 select 标签、 input (radio) 标签的选中状态。

注意过滤器中加空格代表从子类中找，不加空格是从自身查找。

<html><head>  <title>titletitle>  <script type="text/javascript" src="../js/jquery-1.7.1.min.js">script>  <script type="text/javascript">        // 相当于window.onload    $(function () {            //添加点击事件      $("button").click(function () {        // 过滤器中加空格代表从子类中找        console.log("select: " + $("select :selected").val());        // 不加空格从自身找        console.log("radio: " + $("input:checked").val());        $("select :selected").text("选中了");        $("select [selected != 'selected']").text("未选中");      })    })script>head><body>  <select>    <option value="1">1option>    <option value="2" selected="selected">2option>    <option value="3">3option>  select>  <br>  <input type="radio" name="sex" value="1">  <input type="radio" name="sex" checked="checked" value="2">  <input type="radio" name="sex" value="3">  <br>  <button>点击button>body>html>

使用 jquery 发送 ajax 异步请求。

IDEA 的 jsp 工程代码。

// 服务端端部分代码，父类 DispacherServlet 在前文封装Servlet 工具类中找@WebServlet("/AjaxServlet/*")public class AjaxServlet extends DispacherServlet {    public void hello(HttpServletRequest request, HttpServletResponse response) {        // 接收服务端数据 application/x-www-form-urlencoded        String username = request.getParameter("username");        String age = request.getParameter("age");        System.out.println(username + "\t" + age);        // 响应信息到客户端        try {            response.getWriter().write("

Hello

Ajax

"); } catch (IOException e) { e.printStackTrace(); } }}

<%@ page contentType="text/html;charset=UTF-8" language="java" %><html>  <head>    <title>$Title$title>    <script type="text/javascript" src="js/jquery-1.7.1.min.js">script>    <script type="text/javascript">      $(function () {            // 绑定事件        $("#button1").bind("click", function () {          var param = {            type: "POST",            url: "AjaxServlet/hello",            // data: "username=zs&age=23",            data: {              username: "zs",              age: 23            },            dataType: "html", // 返回数据的预期类型 text、json、xml等            headers: {              "content-type": "application/x-www-form-urlencoded"            },            beforeSend: function (XMLHttpRequest) {              // 发送请求前显示 div2              $("#div2").show();              // 发送请求前执行，优先于 headers 设置              console.log("beforeSend this " + this)            },            success: function (data, textStatus) {              // data 可能是 xmlDoc, jsonObj, html, text, 等等...              console.log("success textStatus " + textStatus);              console.log("success data " + data);              // $("#div1").text(data);              $("#div1").html(data)            },            error: function (XMLHttpRequest, textStatus, errorThrown) {              // 通常 textStatus 和 errorThrown 之中 只有一个会包含信息              console.log("error textStatus " + textStatus);              console.log("error errorThrown " + errorThrown);            },            complete: function (XMLHttpRequest, textStatus) {              // 请求成功或失败都会执行              $("#div2").hide();              console.log("complete textStatus " + textStatus);            }          }          // 发送请求          $.ajax(param);        })      })script>  head>  <body>    <button id="button1">异步访问AjaxServletbutton>    <div id="div1" style="border: antiquewhite solid 1px;width: 100px;height: 100px;">div>    <div id="div2" style="display: none">转圈圈div>  body>html>