ajax发送不出去请求信息，求解决！！！！！

Posted 2023-05-03

function createAjax()
var request=false;

if(window.XMLHttpRequest)
request=new XMLHttpRequest();
if(request.overrideMimeType)
request.overrideMimeType("text/xml");

else if(window.ActiveXObiect)
var versions=['Microsoft.XMLHTTP','MSXML.XMLHTTP','Msxml2.XMLHTTP.7.0','Msxml2.XMLHTTP.6.0',
'Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0','MSXML2.XMLHTTP.2.0'];
for(var i=0;i<versions.length;i++)
try
request=new ActiveXObject(versions[i]);
if(request)
return request;

catch(e)
request=false;



return request;

就是用post发送请求时，总是返回一些标签代码，而不是文本

同志，既然有jquery为什么还要用原生的JS写这么多的代码呢？使用jquery.ajax,如下，
先引入jquery文件后，

$.ajax(

url: "ajax.ashx",

type: "POST", //POST提交

contentType:"application/x-www-form-urlencoded",

data: ksbh: $("#ksbh").val() , //传递到后台的，用JSON格式

beforeSend: function ()

$("#btnSubmit").val("正在提交中..."); $("#btnSubmit").attr("disabled","disabled")

,

complete: function () $("#btnSubmit").val("提交"); $("#btnSubmit").removeAttr("disabled") ,

success: function (data)

$("#msg").html(data);



); 参考技术A 当前创建HTTPRequest对象的方法没有错，其他地方的代码不敢保证！

Vue.js Ajax

1.封装AJAX模块

(1)在src目录下新建api目录，新建ajax.js，写入
(2)引入axios
(3)定义ajax函数，并暴漏出去
(4)ajax函数中调用axios发送请求，并将返回的promise对象 return出去

// 引入axios
import axios from 'axios'

// 暴露ajax
// ajax接收3个参数：url，参数，请求方法
export default function ajax (url='',data={},type='get') {
    let promise
    if(type.toLowerCase() === 'get'){
        //如果是get请求，则将参数拼接到url后面
        let dataStr = ''
        Object.keys(data).forEach(key => {
            // key=value&
            dataStr += key + '=' +data[key] + '&'
        })
        if(dataStr !== ''){
            // 去除最后一个&
            dataStr = dataStr.substring(0,dataStr.lastIndexOf('&'))
            // 将参数拼接到url后面
            url = url + '?' + dataStr
        }
        // 发送get请求，返回一个promise对象
        promise = axios.get(url)
    }else {
        // 发送post请求，返回一个promise对象
        promise = axios.post(url,data)
    }
    // 将promise返回
    return promise
}

(5)引入该模块并使用

// App.vue
<script>
import ajax from './api/ajax.js'

export default {
  mounted () {
    const url = 'https://api.github.com/search/repositories'
    ajax(url,{q:'vue',sort:'stars'}).then(res => {
      console.log(res.data.items[0])
    }).catch(error => {
        alert('请求失败')
    })
  }
}
</script>

2.配置代理解决跨域问题

打开config/index.js文件，找到proxyTable属性进行

proxyTable: {
    '/api': {  // 匹配以/api开头的所有路径
        target: 'http://localhost:4000', // 代理的后端api基础路径
        changeOrigin: true, // 支持跨域
        pathRewrite: { // 重写路径，去掉路径中开头的'/api'
            '^/api': ''
            // '^/api': 'api' 
        }
    }
}

如果要访问后台api地址,例如：http://localhost:4000/List

axios.get('/api/List') // 会 自动替换成 http://localhost:4000/List

如果配置成这样:

pathRewrite: {
    '^/api': 'api'
}

访问后台地址就应该是 http://localhost:4000/api/List