Ajax技术实例篇

最新推荐文章于 2024-08-20 15:23:16 发布

天气好热我好凉快

最新推荐文章于 2024-08-20 15:23:16 发布

阅读量1.1k

点赞数

文章标签： ajax javascript

本文链接：https://blog.csdn.net/weixin_47044904/article/details/125197667

版权

本文通过一个实例展示了如何使用Ajax与Node.js结合，实现在前端页面中发起请求并接收不同数据类型。在项目场景中，点击按钮会触发Ajax请求，请求成功后更新页面内容。在实现过程中遇到了JavaScript回调函数未触发和跨域问题，经过调整JavaScript代码位置及服务器设置允许跨域，成功解决了这些问题。

摘要由CSDN通过智能技术生成

项目场景：

提示：这里简述项目相关背景：

例如：本篇文章通过Html+Ajax+node技术实现一个简单的Ajax请求案例，为加强对Ajax技术的了解和实操经验

实现效果

这是请求前的前端页面，点击两个Button按钮分别发起不同的请求
在这里插入图片描述
这是请求后的前端页面，第一个button发起请求，从服务器端传过来一段字符串，并重新渲染在第一个绿色框中，第二个Button按钮发起请求后从服务器端传过来一份Json数据

代码：

Html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AjaxTest</title>
    <style>
        p {
      font-style: italic;
            font-size: 12px; }        
        div {
      width: 200px;
            height: 100px;
            border: 10px solid green;
            text-align: center;}
    </style>
</head>
<body>
    <button id=