I have created a small python
app to show the demo.
HTML
<html>
<body>
<button id="button"> Click for JSON Response </button>
<div id="update"></div>
<script src="{{url_for('static', filename='jquery-1.8.3.js')}}"></script>
<script type="text/javascript">
$("#button").on('click', function(e){
$.ajax({
type: "POST",
url: "http://localhost:8888/json",
success: function(msg){
$("#update").html(msg['msg']);
}
});
});
</script>
Clicking on the button yields msg
from server. But on mobile, following error is raised.
POST http://localhost:8888/json jquery-1.8.3.js:8434
send jquery-1.8.3.js:8434
jQuery.extend.ajax jquery-1.8.3.js:7986
(anonymous function) 192.168.0.101:8
jQuery.event.dispatch jquery-1.8.3.js:3058
elemData.handle.eventHandle
$.ajax
submits fails in chrome android mobile browser in android 4.2.2.
Edit
1.adb forward tcp:9222 localabstract:chrome_devtools_remote
Then accessed via ip address of the machine with portno(8888) and console log was captured by visiting http://localhost:9222
in laptop.
2. After adding console.log(err) in $.ajax, error message in console is
Object {readyState: 0, setRequestHeader: function, getAllResponseHeaders: function, getResponseHeader: function, overrideMimeType: function…}
abort: function ( statusText ) {
always: function () {
complete: function () {
done: function () {
error: function () {
fail: function () {
getAllResponseHeaders: function () {
getResponseHeader: function ( key ) {
overrideMimeType: function ( type ) {
pipe: function ( /* fnDone, fnFail, fnProgress */ ) {
progress: function () {
promise: function ( obj ) {
readyState: 0
responseText: ""
setRequestHeader: function ( name, value ) {
state: function () {
status: 0
statusCode: function ( map ) {
statusText: "error"
success: function () {
then: function ( /* fnDone, fnFail, fnProgress */ ) {
__proto__: Object