标签 Javascript 下的文章

2024-08-17

HTML, CSS 和 JavaScript 是构建网页的三大支柱技术，下面是它们的基本介绍和入门示例：

HTML:

HyperText Markup Language，超文本标记语言，用于创建网页的结构。




<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">这是一个链接</a>
</body>
</html>

CSS:

Cascading Style Sheets，层叠样式表，用于控制网页的样式和布局。




body {
    background-color: #f0f0f0;
}
 
h1 {
    color: blue;
}
 
p {
    color: green;
}

JavaScript:

是一种编程语言，用于添加交互性和动态性。




// 改变段落的文本
function changeParagraphText() {
    var p = document.querySelector('p');
    p.textContent = '段落已更改！';
}
 
// 当按钮被点击时执行函数
document.querySelector('button').addEventListener('click', changeParagraphText);

HTML 定义了网页的结构，CSS 装饰了网页的外观，而 JavaScript 使网页具有活力，可以响应用户的操作。

System

2024-08-17

所有,css

前端开发技能主要包括HTML、CSS和JavaScript的使用，以及对Bootstrap和jQuery的熟悉程度。以下是一些基本的示例代码。

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <button id="myButton">点击我</button>
    <div id="myDiv">这是一个div</div>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css):




body {
    background-color: #f0f0f0;
}
 
h1 {
    color: blue;
}
 
#myButton {
    background-color: green;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
 
#myDiv {
    display: none;
    padding: 20px;
    background-color: white;
    border-radius: 5px;
}

JavaScript (script.js):




document.getElementById('myButton').addEventListener('click', function() {
    document.getElementById('myDiv').style.display = 'block';
});

对于Bootstrap和jQuery，通常是通过CDN链接在HTML文件中引入，然后使用它们提供的类和方法来简化开发。例如，使用Bootstrap创建一个模态对话框：

HTML:




<!-- 引入Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 
<div class="modal" id="myModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">模态对话框标题</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>这是一些示例文本。</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存更改</button>
      </div>
    </div>
  </div>
</div>
 
<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">打开模态对话框</button>

这段代码展示了如何使用Bootstrap创建一个简单的模态对话框，通过按钮触发显示。jQuery用于处理事件和简化DOM操作。

System

2024-08-17

所有,ajax

错误解释：

HTTP 400 错误表示客户端请求的语法错误，导致服务器无法理解请求。在这种情况下，可能是因为通过 AJAX 发送的 POST 请求中的 FormData 对象构造不当或者传输的数据格式有误。

解决方法：

检查前端代码中的 FormData 对象是否正确构造。确保所有要上传的文件和表单数据都被正确地添加到 FormData 对象中。
确保前端设置了正确的 Content-Type 头信息。对于包含表单数据的请求，应该使用 multipart/form-data，这样服务器能正确解析文件和表单字段。
检查是否有数据类型不匹配的问题，例如尝试将非文件数据错误地作为文件传输。
确保服务器端能正确处理请求，包括解析请求正文和保存文件等后续操作。

示例代码：

前端（JavaScript）：




var formData = new FormData();
formData.append('file', fileInputElement.files[0]); // 假设有一个文件输入
formData.append('otherData', 'some value'); // 添加其他表单数据
 
var xhr = new XMLHttpRequest();
xhr.open('POST', 'yourServerEndpoint', true);
xhr.onload = function () {
  if (this.status == 200) {
    // 请求成功处理
  }
};
xhr.send(formData);

后端（Java）：




@PostMapping("/yourServerEndpoint")
public ResponseEntity<?> handleFileUpload(@RequestParam("file") MultipartFile file,
                                          @RequestParam("otherData") String otherData) {
    // 处理上传的文件和其他数据
    // ...
    return ResponseEntity.ok("Success");
}

确保你的后端控制器方法能够接收 MultipartFile 类型的参数以及其他表单字段。如果你的后端使用的是其他框架，请根据该框架的要求进行相应的调整。

- 阅读更多 -

【JavaScript】什么是AJAX?如何用AJAX实现异步通讯？

System

2024-08-17

所有,ajax

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




function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // 现代浏览器
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // IE8和IE9
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // 不支持CORS的浏览器
    xhr = null;
  }
  return xhr;
}
 
function makeRequest(method, url, async, headers, onSuccess, onError) {
  var xhr = createCORSRequest(method, url);
  if (!xhr) {
    throw new Error('CORS not supported');
  }
 
  if (async) {
    xhr.onload = function() {
      if (xhr.status === 200) {
        onSuccess(xhr.responseText);
      } else {
        onError(xhr.statusText);
      }
    };
    xhr.onerror = function() {
      onError(xhr.statusText);
    };
  }
 
  if (headers) {
    Object.keys(headers).forEach(function(header) {
      xhr.setRequestHeader(header, headers[header]);
    });
  }
 
  if (async) {
    xhr.send();
  } else {
    xhr.send();
    if (xhr.status === 200) {
      return xhr.responseText;
    } else {
      throw new Error(xhr.statusText);
    }
  }
}
 
// 使用示例
var url = 'https://api.example.com/data';
var headers = { 'Custom-Header': 'value' };
 
try {
  var response = makeRequest('GET', url, false, headers);
  console.log('同步请求结果:', response);
} catch (e) {
  console.error('发生错误:', e);
}
 
makeRequest('GET', url, true, headers, function(response) {
  console.log('异步请求结果:', response);
}, function(error) {
  console.error('异步请求发生错误:', error);
});

这段代码定义了两个函数：createCORSRequest用于创建跨域请求，makeRequest用于发送请求并处理结果。makeRequest函数支持自定义headers、同步和异步请求，并提供了成功和错误的回调函数。这是一个简洁的Ajax请求封装，适用于现代和旧版浏览器。

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的实际代码，也没有处理异常和安全问题（如密码散列），实际应用中需要补充这些。

- 阅读更多 -