AJAX——综合案例

1 Bootstrap弹框

功能：不���开当前页面，显示单独内容，供用户操作

步骤：

1. 引入bootstrap.css和bootstrap.js
2. 准备弹框标签，确认结构
3. 通过自定义属性，控制弹框的显示和隐藏

  
  
  
  Bootstrap 弹框
  
  


  
  
    显示弹框
  
  
  
    
      
      
        
        
          
Modal title
          
        
        
        
          
Modal body text goes here.
        
        
        
          Close
          Save changes
        
      
    
  
  
  

2 Bootstrap弹框使用-js控制显示和隐藏

1.通过属性控制，弹框显示或隐藏     单纯显示/隐藏

2.通过JS控制，弹框显示或隐藏      额外逻辑代码

  
  
  
  Bootstrap 弹框
  
  


  
  
    编辑姓名
  
  
    
      
        
          
请输入姓名
          
        
        
          
            姓名：
            
          
        
        
          取消
          保存
        
      
    
  
  
  
   
    // 1. 创建弹框对象
    const modalDom = document.querySelector('.name-box')
    const modal = new bootstrap.Modal(modalDom)
    // 编辑姓名->点击->赋予默认姓名->弹框显示
    document.querySelector('.edit-btn').addEventListener('click', () => {
      document.querySelector('.username').value = '默认姓名'
      // 2. 显示弹框
      modal.show()
    })
    // 保存->点击->->获取姓名打印->弹框隐藏
    document.querySelector('.save-btn').addEventListener('click', () => {
      const username = document.querySelector('.username').value
      console.log('模拟把姓名保存到服务器上', username)
      // 2. 隐藏弹框
      modal.hide()
    })