手机android端的html5页面用ajax访问服务器,后台成功从数据库查询到值,但是前段一直调用ajax的error

在手机Android端的HTML5页面中,使用AJAX调用服务器数据时,虽然能成功查询数据库,但前端始终触发error回调。问题根源在于跨域限制。为解决此问题,采用JavaScript调用Java代码,通过Java实现HTTP请求获取服务器数据,然后将数据回传给HTML。确保在Java中使用@JavascriptInterface注解以提高安全性,对于targetSdkVersion大于等于17的应用,别忘了添加此注解。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原来代码:

function gerflowerinfo(cateval,URL){
                  $.ajax({
                     url:URL,//不能是双引号,不然为常量
                     type:"post",
                     async:true,
                     dataType:"json",
                     //jsonp: "jsoncallback",//1.解决跨域问题,然而并卵
                     //jsonpCallback:"loginCallback",//2.<span style="font-family: Arial, Helvetica, sans-serif;">解决跨域问题,然而并卵</span>
                     data:{"cateval":cateval},
                     success:function(data){
                       alert("成功了吗?");
                      //$("#fmeans").html("成功了吗?");
                     },
                     error:function(XMLHttpRequest,textStatus,errorThrown){
					    alert(XMLHttpRequest.status);//结果为0
					    alert(XMLHttpRequest.readyState);<span style="font-family: Arial, Helvetica, sans-serif;">//结果为0</span>
					    alert(errorThrown);
				    }
                 })
             }


原来思路:html5页面的js中利用ajax访问服务器的数据,成功的话调用ajax中的success,对data数据进行处理。根据需求放到页面的标签当中。

问题:虽然参数成功传到了后台并且成功的从数据库中查询到了数据,但是返回前台时一直调用error.

问题分析:ajax的跨域局限性,手机和电脑在不同域,数据返回到前台有限制,这是ajax一直存在的问题。

解决方法:后来没办法,只能通过html调用js----->通过js----->访问java代码-------->通过java代码发送http请求服务器数据-------->返回到java,再发送给html

注意:1.

JS可以通过反射来访问其他一些内容。通过引入 @JavascriptInterface注解,则在JS中只能访问 @JavascriptInterface注解的函数。这样就可以增强安全性。
如果您的应用android:targetSdkVersion数值为17或者大于17记得添加 @JavascriptInterface 注解。
下面为关键代码段:
html中
标签:<li><a href="javascript:test('1');"><img src="../img/ssfw6.jpg" alt="季节"><h3>季节</h3></a></li>
js:
function test(index)
            {
                action.setParam(index);//通过注解得到的
                action.findflower();//调用java里面的方法
            }
Activity中:
1.
 twebview.addJavascriptInterface(new DemoJavaScriptInterface1(), "action");
        twebview.loadUrl("file:///android_asset/html/taohua.html");
2.msg用来将服务器的数据发送给html
FinalAttribute.taomHandler=new Handler(){//定义的全局变量
            @Override
            public void handleMessage(Message msg) {
                if (msg.what==1)
                {
                    String content=msg.obj.toString();
                    DemoJavaScriptInterface1 ds= new DemoJavaScriptInterface1(content);//这个content就是从后台获取的json数据
                    ds.setParam(FinalAttribute.cate);//这个是分类id
                    //twebview.removeJavascriptInterface("action");
                    twebview.addJavascriptInterface(ds, "action1");
                    twebview.loadUrl("file:///android_asset/html/festival2.html");
                }
            }
        };


java中
1.
<span style="background-color: rgb(255, 204, 204);">DemoJavaScriptInterface1</span>
package com.graduationproject.custom;

import android.util.Log;
import android.webkit.JavascriptInterface;

import com.graduationproject.entity.FinalAttribute;

/**
 * Created by Administrator on 2015/10/17.
 */
public class DemoJavaScriptInterface1 {

        public String param;
        private String content;
        @JavascriptInterface、、
        public String getContent() {
            return content;
        }
        public void setContent(String content) {
            this.content = content;
        }
        @JavascriptInterface
        public String getParam() {
            return param;
        }
        @JavascriptInterface
        public void setParam(String param) {
            FinalAttribute.cate=param;
            this.param = param;
        }

        public DemoJavaScriptInterface1() {
        }
        public DemoJavaScriptInterface1(String p) {
            content=p;
        }

        /**
         * This is not called on the UI thread. Post a runnable to invoke
         * loadUrl on the UI thread.
         */
        @JavascriptInterface
        public void findflower() {
            FinalAttribute.taomHandler.post(new Runnable() {
                public void run() {
                    //AlertDialog.Builder builder=new AlertDialog.Builder(getContext()).setTitle("test").create().show();
                    Log.i("tag", "action is alive");
                    GetFlowerInfo1 info = new GetFlowerInfo1(param);
                    info.start();
                }
            });

        }
}
2.
<span style="background-color: rgb(51, 204, 255);">GetFlowerInfo1 </span>
package com.graduationproject.custom;

import android.os.Message;

import com.graduationproject.entity.FinalAttribute;

import org.apache.http.HttpResponse;
import org.apache.http.client.methods.HttpGet;
import org.apache.http.impl.client.DefaultHttpClient;
import org.apache.http.util.EntityUtils;

/**
 * Created by Administrator on 2015/10/17.
 */
public class GetFlowerInfo1 extends Thread{
    private String param;
    public GetFlowerInfo1(String p)
    {
        param=p;
    }
    @Override
    public void run() {
        getfinfoByPost(param);
    }

    //通过post方法向后台提交数据
    public  void getfinfoByPost(String paras) {
        String result;
        try{
            //定义获取http客户端对象
            DefaultHttpClient httpClient=new DefaultHttpClient();
            String url="http://192.168.155.1:8080/TaoFlower/getflowerinfo?cateval="+paras;
            //获取向访问地址发出的请求对象
            HttpGet request=new HttpGet(url);
            //获取从访问地址返回的响应对象
            HttpResponse response=httpClient.execute(request);
            System.out.println("paras值:"+paras);

            if(response.getStatusLine().getStatusCode()== 200){
                //将响应请求的对象转换成实体形式的字符形式的参数
                result= EntityUtils.toString(response.getEntity(), "utf-8");
                System.out.println("result值:"+result);
                Message msg=new Message();
                msg.what=1;
                msg.obj=result;
                FinalAttribute.taomHandler.sendMessage(msg);
                //创建一个json对象
                //   JSONObject jsonObject=new JSONObject(result);
//                Gson gson=new Gson();
//                List<Flower> retList = gson.fromJson(result,
//                        new TypeToken<List<Flower>>() {
//                        }.getType());
                //将从后台获取的数据放到封装对象里面
                //return  result;
            }
        }catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }

    }

}

html页面如何获取:
 <span style="white-space:pre">		</span>
<span style="white-space:pre">		</span>var temp=action1.getContent();//json数据内容
                var cateval=action1.getParam();//类别id
                //alert(temp);





<think>好的,我现在需要解决用户在Android混合开发中遇到的H5页面通过Ajax调用接口报错的问题。首先,我得理解用户的问题场景。用户可能在WebView中加载了一个H5页面,当页面中的JavaScript代码通过Ajax请求后端接口时出现了错误。这类问题可能涉及多个方面,比如网络权限、问题、WebView配置不正确、接口协议问题等。 首先,我应该考虑网络权限的问题。Android应用如果访问网络,需要在AndroidManifest.xml中添加INTERNET权限。如果用户忘记添加这个权限,那么任何网络请求都会失败。所以检查权限文件是第一步。 接下来是WebView的配置。默认情况下,WebView可能没有启用JavaScript支持,或者没有允许访问本地文件(如果H5页面是从本地加载的)。需要确认是否调用了setJavaScriptEnabled(true)和setDomStorageEnabled(true)等方法。此外,混合开发中可能需要WebViewClient来处理页面加载和请求,比如覆盖shouldOverrideUrlLoading方法,或者处理SSL错误。 问题也是一个常见的原因。如果H5页面通过Ajax请求的接口与当前页面名不同,浏览器会因为同源策略而阻止请求。这时候需要在服务端设置CORS头部,允许请求,或者在Android端通过WebView的配置来绕过这个问题,比如使用@JavascriptInterface注解暴露原生方法,让H5通过调用原生方法发起请求,从而避免限制。 然后,接口协议的问题。如果H5页面使用的是HTTP,而Android应用要求HTTPS,或者存在混合内容的问题(即HTTPS页面加载HTTP资源),这可能导致请求被阻止。需要检查协议是否一致,或者配置WebView允许混合内容。 还有可能是Ajax请求本身的问题,比如参数错误、接口地址不正确、请求超时等。这时候需要检查H5端的代码,确认请求的URL、方法、头部和参数是否正确,是否有拼写错误。同时,可以查看Android的Logcat输出,是否有相关的错误日志,比如网络错误、安全异常等。 另外,安全性设置也可能导致问题。例如,Android 9及以上默认禁止明文传输,如果使用HTTP,需要在网络安全配置中允许明文传输。或者,如果接口使用了自签名证书,可能需要配置WebView忽略SSL错误,但这会带来安全风险,需谨慎处理。 还有可能,H5页面和原生之间的通信出现问题。比如,通过@JavascriptInterface暴露的方法没有被正确调用,或者参数传递错误。需要检查方法是否公开,参数类型是否正确,以及是否有必要的同步或异步处理。 接下来,我应该逐步整理这些可能性,并给出对应的解决方案步骤。同时,需要提醒用户如何调试,比如启用WebView的调试模式,使用Chrome开发者工具远程调试WebView,查看网络请求和控制台日志,这能帮助快速定位问题。 此外,可能需要检查是否处理了SSL证书错误。如果接口使用HTTPS且证书有问题,WebView默认会拒绝连接。可以在WebViewClient中重写onReceivedSslError方法,处理这类错误,但生产环境中不建议这样做,应确保使用有效证书。 最后,生成相关问题,帮助用户进一步理解和解决可能遇到的其他问题,比如问题的详细解决方法,WebView与JavaScript的交互优化,或者如何提升混合应用的网络请求安全性等。</think>### Android混合开发中H5页面Ajax调用接口报错解决方案 #### 1. 检查网络权限与WebView基础配置 - **网络权限**:确保`AndroidManifest.xml`已添加网络权限: ```xml <uses-permission android:name="android.permission.INTERNET" /> ``` - **WebView配置**: ```java WebView webView = findViewById(R.id.webview); webView.getSettings().setJavaScriptEnabled(true); // 启用JS支持 webView.getSettings().setDomStorageEnabled(true); // 允许本地存储 webView.setWebViewClient(new WebViewClient()); // 避免跳转系统浏览器 ``` #### 2. 处理问题(CORS) - **服务端配置**:在接口响应头中添加允许字段: ```http Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST ``` - **Android端绕过方案**:通过`@JavascriptInterface`暴露原生方法供H5调用: ```java public class JsBridge { @JavascriptInterface public void requestApi(String url, String params) { // 原生代码发起网络请求 } } webView.addJavascriptInterface(new JsBridge(), "AndroidBridge"); ``` H5调用示例: ```javascript window.AndroidBridge.requestApi("https://api.example.com", "{}"); ``` #### 3. 协议与安全性配置 - **混合内容处理**:若H5页面为HTTPS但接口为HTTP,需允许加载混合内容(仅限调试): ```java if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { webView.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_COMPATIBILITY_MODE); } ``` - **网络安全配置**:针对Android 9+的明文限制,创建`res/xml/network_security_config.xml`: ```xml <network-security-config> <domain-config cleartextTrafficPermitted="true"> <domain includeSubdomains="true">example.com</domain> </domain-config> </network-security-config> ``` 并在`AndroidManifest.xml`中引用: ```xml <application android:networkSecurityConfig="@xml/network_security_config"> </application> ``` #### 4. 调试与日志捕获 - **启用WebView调试**: ```java if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { WebView.setWebContentsDebuggingEnabled(true); } ``` - **查看浏览器日志**:通过Chrome访问`chrome://inspect`,选择对应设备与页面,查看Console和Network标签。 #### 5. 处理SSL证书错误(谨慎使用) ```java webView.setWebViewClient(new WebViewClient() { @Override public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) { handler.proceed(); // 忽略证书错误(仅限测试环境) } }); ``` #### 6. 验证Ajax请求代码 检查H5页面Ajax请求是否符合规范: ```javascript fetch('https://api.example.com', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({key: 'value'}) }).catch(error => console.error('Request failed:', error)); ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值