These days I am studying ajax and ace editor, I want to read a url file and display it on ace editor, I don't know how to get it when the url is https, do you have a good method?
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/cerulean/bootstrap.min.css" media="all"/>
<style>
#code1,#code2{
height:800px;
font-size:14px;
border-bottom:2px solid #999;
}
ul.app_cat_ul{
padding:0px;
list-style:none;
overflow:hidden;
}
ul.app_cat_ul li a:hover{
background-color:#EEE;
}
/* nav */
ul.nav_ul{
margin:0px;
padding:0px;
list-style:none;
overflow:hidden;
}
ul.nav_ul li{
float:left;
margin-right:3px;
}
ul.nav_ul li a{
padding:12px;
display:block;
color:#555;
background-color:#FFF;
border:1px solid #EEE;
}
ul.nav_ul li a:hover{
background-color:#EEE;
}
ul.ul_buttons li a{
margin:5px 0px;
color:#555;
background-color:#FFF;
border:1px solid #C0C0C0;
}
</style>
</head>
<body>
<div class="header">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<h1>ACE ajax test</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<form class="form-inline text-left">
<fieldset>
<div class="form-group buttons_div">
<div class="col-md-12">
<ul class="nav_ul ul_buttons">
<li><a id="load_url" href="#">Load Url</a></li>
<li><a id="browse" href="#">Browse</a></li>
</ul>
</div>
</div>
<input style="display:none;" id="file" name="file" class="btn btn-default" type="file">
</fieldset>
</form>
<div class="row">
<div class="col-md-12 div_code1">
<div class="h_text">Enter here:</div>
<div id="code1"></div>
<div id="code2" style="display:none"></div>
</div>
</div>
</div><!-- Modal -->
<div class="modal fade" id="url_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Enter Url</h4>
</div>
<div class="modal-body">
<input id="url" name="url" type="text" placeholder="Enter full url" class="form-control input-md">
</div>
<div class="modal-footer">
<button data-dismiss="modal" id="load" name="load" class="btn btn-success">Load</button>
<button data-dismiss="modal" id="cancel" name="cancel" class="btn btn-danger">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="well well-sm data_tb text-left" style="overflow:auto;display:none;"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zclip/1.1.2/jquery.zclip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ext-language_tools.js"></script>
<script>
$(document).ready(function(e) {
ace.require("ace/ext/language_tools");
var editorAce1 = ace.edit("code1");
editorAce1.focus();
editorAce1.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
editorAce1.setTheme("ace/theme/chrome");
editorAce1.getSession().setMode("ace/mode/plain_text");
var editorAce2 = ace.edit("code2");
editorAce2.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
editorAce2.setTheme("ace/theme/chrome");
editorAce2.getSession().setMode("ace/mode/html");
editorAce2.getSession().setUseWorker(false);
$("#load_url").click(function(e) {
e.preventDefault();
$("#url_modal").modal({backdrop : false});
});
$("#load").click(function(e) {
e.preventDefault();
url = $.trim($("#url").val());
if(url != "")
{
editorAce1.getSession().setUseWorker(false);
editorAce1.setValue("Please wait while loading file from url.");
$.ajax({
type : "POST",
url : "/get_data.php",
dataType: "text",
data : {"url" : url},
success : function(data)
{
if(data == "file_not_found")
{
editorAce1.setValue("Unable to load file from url!");
}else
{
editorAce1.getSession().setUseWorker(true);
editorAce1.setValue(data);
}
},
error : function()
{
editorAce1.setValue("Unable to load file from url!");
}
});
}
});
$("#browse").click(function(e) {
e.preventDefault();
$("#file").click();
});
function read_file(e)
{
f = e.target.files[0];
if(f)
{
r = new FileReader();
r.onload = function(e)
{
var contents = e.target.result;
var file_name = f.name;
editorAce1.getSession().setUseWorker(true);
editorAce1.setValue(contents);
}
r.readAsText(f);
}
else
{
editorAce1.getSession().setUseWorker(false);
editorAce1.setValue("Unable to load file!");
}
}
$("#file").change(function(e) {
e.preventDefault();
read_file(e);
});
themelist = ace.require("ace/ext/themelist");
theme = "";
$(themelist.themes).each(function(key, value) {
theme += '<option value="' + value.name + '">' + value.caption + '</option>';
});
$("#themes").append(theme);
$("#themes").val("chrome");
$("#font_size").val("14");
$("#themes,#font_size").change(function(e) {
setTheme();
editorAce1.focus();
});
});
</script>
</body>
</html>The userface pic Core code pic Most of codes have worked well. Could you help me write the get_data.php file for me, let the page work. Thanks.
