标签 Javascript 下的文章

2024-08-17

AJAX（Asynchronous JavaScript and XML）是一种创建交互式网页应用的技术。它允许网页向服务器发送异步请求，而不会打断用户的操作。这些请求通常使用JavaScript发送，并且可以接收服务器返回的数据，然后用JavaScript更新网页，而不需要刷新整个页面。

以下是使用AJAX发送GET请求的基本步骤：

创建一个新的XMLHttpRequest对象。
配置请求，包括事件处理程序。
发送请求。
服务器响应时，处理服务器返回的数据。

示例代码：




// 创建新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 配置请求
xhr.open('GET', 'your-api-endpoint', true);
 
// 发送请求
xhr.send();
 
// 事件处理程序
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功完成
        var response = xhr.responseText;
        // 使用服务器返回的数据更新网页
        document.getElementById('your-element-id').innerHTML = response;
    }
};

在这个例子中，我们向服务器发送了一个GET请求，并在请求成功完成并且服务器响应状态为200时，我们取出响应的文本并更新了页面上的元素。

- 阅读更多 -

json字符串转json对象(前端json字符串转json对象)

System

2024-08-17

所有,ajax

在前端，你可以使用JavaScript的内置函数JSON.parse()来将JSON字符串转换为JSON对象。以下是一个简单的例子：




// 假设你有一个JSON字符串
var jsonString = '{"name": "John", "age": 30, "city": "New York"}';
 
// 使用JSON.parse()将字符串转换为JSON对象
var jsonObj = JSON.parse(jsonString);
 
// 现在你可以像访问普通对象一样访问jsonObj的属性
console.log(jsonObj.name); // 输出: John
console.log(jsonObj.age); // 输出: 30
console.log(jsonObj.city); // 输出: New York

请确保你的JSON字符串格式正确，否则JSON.parse()可能会抛出异常。

System

2024-08-17

所有,ajax

以下是使用原生JavaScript和Ajax以及使用Fetch的示例代码，实现登录并将Token保存到localStorage中。

使用原生JavaScript和Ajax的示例：




// 登录函数
function login(username, password) {
  var xhr = new XMLHttpRequest();
  xhr.open("POST", "/api/login", true);
  xhr.setRequestHeader("Content-Type", "application/json");
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);
      localStorage.setItem('token', response.token);
      // 登录成功后的操作
    } else if (xhr.status !== 200) {
      // 处理错误
    }
  };
  xhr.send(JSON.stringify({ username: username, password: password }));
}

使用Fetch的示例：




// 登录函数
function login(username, password) {
  fetch('/api/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username: username, password: password })
  })
  .then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => {
    localStorage.setItem('token', data.token);
    // 登录成功后的操作
  })
  .catch(error => {
    console.error('登录失败:', error);
  });
}

在这两个示例中，我们都发送了一个POST请求到/api/login，并在收到服务器的响应后，将返回的token保存到localStorage中。如果使用Ajax，我们需要处理xhr.readyState和xhr.status，而使用Fetch时，我们可以利用response.ok来简化错误处理，并使用Promise链进行异步操作。

- 阅读更多 -

【JS020】原生JS实现AJAX

System

2024-08-17

所有,ajax

原生JavaScript实现AJAX的方法如下：




// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'your-api-endpoint', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求成功的响应数据
      console.log(xhr.responseText);
    } else {
      // 处理请求失败
      console.error('AJAX Request failed');
    }
  }
};
 
// 发送请求
xhr.send();

这段代码展示了如何使用原生JavaScript发送GET请求。如果你需要发送POST请求，你需要修改open方法中的参数，并且可能需要使用send方法传递数据。

System

2024-08-17

所有,ajax

以下是使用高德开放平台API和JavaScript实现的Ajax请求来定位城市并获取天气情况的示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>获取天气信息</title>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德API密钥"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
</head>
<body>
    <div id="container" style="width:600px;height:400px;"></div>
    <div id="tip"></div>
 
    <script>
        var map = new AMap.Map('container', {
            resizeEnable: true
        });
 
        // 使用HTML5定位
        map.plugin('AMap.Geolocation', function() {
            var geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,  // 是否使用高精度定位，默认:true
                timeout: 10000            // 超过10秒后停止定位，默认：5s
            });
 
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation, 'complete', onComplete);  //返回定位信息
            AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
        });
 
        // 解析定位结果
        function onComplete(data) {
            var str = ['定位成功'];
            str.push('经度：' + data.position.getLng());
            str.push('纬度：' + data.position.getLat());
            if(data.accuracy){
                str.push('精度：' + data.accuracy + ' 米');
            }
            // 获取天气信息
            getWeatherInfo(data.position.getLng(), data.position.getLat());
            document.getElementById('tip').innerHTML = str.join('<br>');
        }
 
        // 定位出错
        function onError(data) {
            document.getElementById('tip').innerHTML = '定位失败';
        }
 
        // 获取天气信息
        function getWeatherInfo(lng, lat) {
            var cityInfoUrl = "https://restapi.amap.com/v3/weather/weatherInfo?key=您的高德API密钥&city=" + encodeURIComponent(lng) + "," + encodeURIComponent(lat);
            var xhr = new XMLHttpRequest();
            xhr.open("GET", cityInfoUrl, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var response = JSON.parse(xhr.responseText);
                    if(response && response.lives && response.lives.length > 0) {
                        var live = response.lives[0];
                        console.log(live);
                        // 这里可以处理live

System

2024-08-17

所有,ajax

由于提出的查询涉及的内容较多且复杂，我将提供一个简化版的示例，展示如何使用JSP、Servlet、MySQL和AJAX进行基本的用户注册功能。

创建User实体类：




public class User {
    private String username;
    private String password;
    // 构造函数、getter和setter省略
}

创建UserDAO用于数据库操作：




public class UserDAO {
    public boolean insertUser(User user) {
        // 连接数据库、执行插入操作、关闭连接的代码省略
        return true; // 假设插入成功
    }
}

创建Servlet处理用户注册请求：




@WebServlet("/register")
public class RegisterServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
 
        User user = new User();
        user.setUsername(username);
        user.setPassword(password);
 
        UserDAO userDAO = new UserDAO();
        boolean success = userDAO.insertUser(user);
 
        if (success) {
            response.getWriter().write("注册成功");
        } else {
            response.getWriter().write("注册失败");
        }
    }
}

创建注册页面register.jsp：




<form id="regForm">
    用户名: <input type="text" name="username" /><br />
    密码: <input type="password" name="password" /><br />
    <input type="button" value="注册" id="registerBtn" />
</form>
 
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function() {
        $('#registerBtn').click(function() {
            $.ajax({
                url: '/register',
                type: 'POST',
                data: $('#regForm').serialize(),
                success: function(response) {
                    alert(response);
                },
                error: function() {
                    alert('注册失败');
                }
            });
        });
    });
</script>

这个简单的例子展示了如何使用JSP、Servlet和AJAX进行用户注册。当用户点击注册按钮时，会通过AJAX将数据发送到后端的RegisterServlet，后者会处理数据并将其插入到数据库中。

注意：这个例子没有包括连接MySQL的实际代码，也没有处理异常和安全问题（如密码散列），实际应用中需要补充这些。

- 阅读更多 -

JS Ajax 封装

System

2024-08-17

所有,ajax

以下是一个简单的JavaScript函数，用于封装AJAX请求，并提供了基本的错误处理和数据类型转换功能。




function ajax(url, method, data, callback) {
    // 创建XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
 
    // 处理请求完成后的函数
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                // 请求成功
                var response = xhr.responseText;
 
                try {
                    response = JSON.parse(response);
                } catch (e) {
                    // 假设响应是文本
                }
 
                callback(null, response);
            } else {
                // 请求失败
                callback(new Error("AJAX request failed"), null);
            }
        }
    };
 
    // 设置请求的URL、方法和数据
    xhr.open(method, url, true);
 
    if (method === "POST") {
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    }
 
    // 发送请求
    xhr.send(data);
}
 
// 使用示例
ajax('https://api.example.com/data', 'GET', null, function(err, response) {
    if (err) {
        console.error(err);
    } else {
        console.log(response);
    }
});

这个封装的ajax函数接受四个参数：url（请求的URL）、method（请求的HTTP方法，如GET或POST）、data（作为请求主体发送的数据）和callback（请求完成时调用的函数）。它会自动处理JSON响应或者将响应文本传递给回调函数。如果请求失败，它将返回一个Error对象。

- 阅读更多 -

【Java】数据交换 Json 和异步请求 Ajax

System

2024-08-17

所有,ajax

在Java后端处理数据交换，可以使用Jackson库来处理JSON数据，并使用Spring框架的@RestController和@RequestMapping注解来创建RESTful API。对于异步请求，可以使用JavaScript的XMLHttpRequest或现代的fetch API来发送Ajax请求。

以下是一个简单的例子：

Java后端（Spring Boot）:




import org.springframework.web.bind.annotation.*;
 
@RestController
public class DataController {
 
    @GetMapping("/data")
    public MyData getData() {
        // 模拟数据
        MyData data = new MyData();
        data.setId(1);
        data.setName("Sample");
        return data;
    }
 
    @PostMapping("/data")
    public void updateData(@RequestBody MyData newData) {
        // 更新数据逻辑
    }
 
    static class MyData {
        private int id;
        private String name;
 
        // getters and setters
    }
}

JavaScript前端（使用fetch API）:




// 获取数据
fetch('/data')
  .then(response => response.json())
  .then(data => {
    console.log('Received data:', data);
  });
 
// 发送数据
var data = { id: 1, name: 'Sample' };
fetch('/data', {
  method: 'POST', // or 'PUT'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then(response => response.text())
.then(response => console.log(response));

在这个例子中，Java后端定义了两个简单的RESTful API，用于获取（GET）和更新（POST）数据。JavaScript前端使用fetch API来异步发送请求，并处理响应。

- 阅读更多 -

Flask实现ajax交互json数据

System

2024-08-17

所有,ajax

在Flask中实现AJAX交互JSON数据，你可以使用jQuery来简化客户端的代码。以下是一个简单的例子：

首先，设置一个Flask路由来处理AJAX请求并返回JSON数据：




from flask import Flask, request, jsonify
 
app = Flask(__name__)
 
@app.route('/get_data', methods=['POST'])
def get_data():
    # 假设我们需要从前端接收一个名为 'param' 的参数
    param = request.json.get('param')
    # 根据接收到的参数处理数据，并构造返回的数据字典
    response_data = {'message': 'Received param: ' + str(param)}
    return jsonify(response_data)
 
if __name__ == '__main__':
    app.run(debug=True)

然后，使用jQuery发送AJAX请求并处理返回的JSON数据：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX Example</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#ajax_button").click(function(){
                var data = {
                    param: 'example'
                };
                $.ajax({
                    type: 'POST',
                    url: '/get_data',
                    contentType: 'application/json',
                    data: JSON.stringify(data),
                    success: function(response) {
                        console.log(response);
                        // 处理返回的JSON数据
                        $('#result').text(response.message);
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <button id="ajax_button">Send AJAX Request</button>
    <div id="result"></div>
</body>
</html>

在这个例子中，当按钮被点击时，它会发送一个AJAX POST请求到/get_data路由，并附带一个名为param的JSON参数。Flask路由会处理这个请求，并返回一个JSON响应。然后，jQuery的success回调函数会处理这个响应，并更新页面上的元素。

- 阅读更多 -

AJAX异步请求&JSON数据格式

System

2024-08-17

所有,ajax

以下是一个使用AJAX发送异步请求并处理JSON响应的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX & JSON Example</title>
    <script>
        function fetchData() {
            var xhr = new XMLHttpRequest(); // 创建一个新的XMLHttpRequest对象
 
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // 请求成功完成
                    var jsonResponse = JSON.parse(xhr.responseText);
                    console.log(jsonResponse); // 输出JSON响应到控制台
                    // 这里可以继续处理jsonResponse
                }
            };
 
            xhr.open("GET", "https://api.example.com/data", true); // 设置请求参数
            xhr.send(); // 发送请求
        }
    </script>
</head>
<body>
    <button onclick="fetchData()">Fetch Data</button> <!-- 触发AJAX请求的按钮 -->
</body>
</html>

这段代码中，我们定义了一个名为fetchData的函数，该函数通过创建一个新的XMLHttpRequest对象来发送一个GET请求到指定的URL。请求完成后，如果请求成功（readyState为4且status为200），它会解析响应文本为JSON，并将其输出到控制台。这个例子展示了如何使用AJAX异步获取数据并处理JSON格式的响应。

- 阅读更多 -