使用Innert html创建文件的更好方法
[英]Better Method to Create a file using Innert html
问题描述
In this project i creating a new file when user submit the forum . 
在这个项目中，当用户提交论坛时，我将创建一个新文件。 The file contain the html structure inside the #main div . 该文件包含#main div中的html结构。 Please see my code 请看我的代码
<?php
if(ISSET($_POST['submit'])){
$myfile = fopen($_POST['user_name'].".html", "w") or die("Unable to open file!");
$txt = $_POST['inner_html'];
fwrite($myfile, $txt);
fclose($myfile);
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div class="new-classs" style="color:green;width:100px">
<img src="tst.jpg" />
<span>Content of #main div goes here</span>
</div>
</div>
<form method="post" action="">
<input type="text" name="user_name" class="user_name" required>
<input type="hidden" name="inner_html" class="inner_html">
<input type="submit" value="submit" name="submit" class="submit">
</form>
<script>
$('.submit').on("click",function(e){
$(".inner_html").val($("#main").html());
});
</script>
I am using php and Jquery for this purpose . 我为此目的使用php和Jquery 。
But here what is the problem is some time #main div contain too much inner html . 但是这里的问题是#main div包含太多内部html。
So it will be a problem when passing as $_POST ? 所以当作为$_POST传递时将是一个问题？
$_POST will restrict the value if it exceed some amount? $_POST是否会限制该值（如果超过某个值）？
Is there any alternate or good method to solve this problem ? 是否有其他替代方法或好的方法来解决此问题？
1 个解决方案
解决方案1
1 2017-06-27 14:16:23
One method you could consider, rather than actually trying to POST a huge amount of data, just POST the url of the document / page in question to a PHP script which can then use dom manipulation to find the desired content for you. 您可以考虑采用的一种方法，而不是实际尝试发布大量数据，而只是将有问题的文档/页面的POST发布到PHP脚本，然后可以使用dom操作为您找到所需的内容。 That should make the request pretty quick and won't run into any limits in terms of POSTed data. 这样应该可以使请求变得非常快，并且不会对POST数据造成任何限制。
The ajax function could easily be replaced by a jQuery version - I don't use jQuery. Ajax函数很容易被jQuery版本取代-我不使用jQuery。
The button in the form no longer submits the form in the tradional sense but triggers an ajax request that sends the page & username details to the backend php code. 表单中的按钮不再以传统意义提交表单，而是触发ajax请求，该请求将页面和用户名详细信息发送到后端php代码。
<?php
if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['username'], $_POST['page'] ) && !empty( $_POST['page'] ) ){
ob_clean();
$username=filter_input( INPUT_POST, 'username', FILTER_SANITIZE_STRING );
/* change path to suit environment */
$targetfile='c:/temp/'.$username.'.html';
libxml_use_internal_errors( true );
/* Load the current or selected page into a new DOMDocument */
$dom=new DOMDocument;
$dom->validateOnParse=false;
$dom->standalone=true;
$dom->strictErrorChecking=false;
$dom->recover=true;
$dom->loadHTMLFile( $_POST['page'] );
/* Find the element in the DOM to save */
$div = $dom->getElementById('main');
/* Save copy to this Document */
$doc=new DOMDocument;
/* Create a cloned copy of the DIV */
$clone=$div->cloneNode( true );
/* Add the clone to our new document */
$doc->appendChild( $doc->importNode( $clone, true ) );
/* write the cloned node innerHTML to file */
$bytes = file_put_contents( $targetfile, $doc->saveHTML() );
libxml_clear_errors();
$dom = $doc = null;
/* send some feedback to the client */
exit( 'Bytes written: '.$bytes.' to '.$targetfile );
}
?>
<!doctype html>
<html>
<head>
<title>Create File via AJAX & DOMDocument</title>
<script type='text/javascript'>
/* simple ajax function for post & get requests */
function ajax(m,u,p,c,o){
/*method,url,params,callback,options*/
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if( xhr.readyState==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getAllResponseHeaders() );
};
var params=[];
for( var n in p )params.push(n+'='+p[n]);
switch( m.toLowerCase() ){
case 'post': p=params.join('&'); break;
case 'get': u+='?'+params.join('&'); p=null; break;
}
xhr.open( m.toUpperCase(), u, true );
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send( p );
}
/* Add event listener to the button */
document.addEventListener('DOMContentLoaded',function(e){
document.getElementById('btn').addEventListener('click',function(e){
var username=document.getElementById('usr').value;
if( username!='' ){
ajax.call( this, 'post', location.href, { page:location.href, username:username }, function(r){
alert(r)
}, null );
}
},false);
},false);
</script>
</head>
<body>
<div id='main'>
<div class='new-classs' style='color:green;width:100px'>
<img src='/images/tarpit.png' />
<span>Content of #main div goes here</span>
<span>Content of #main div goes here</span>
<span>Content of #main div goes here</span>
<span>Content of #main div goes here</span>
<span>Content of #main div goes here</span>
<span>Content of #main div goes here</span>
<span>Content of #main div goes here</span>
<span>Content of #main div goes here</span>
<span>Content of #main div goes here</span>
<span>Content of #main div goes here</span>
<h2>more content...</h2>
<!-- lots and lots of contents -->
</div>
</div>
<form method='post'>
<input id='usr' type='text' name='user_name' class='user_name' required>
<input id='btn' type='button' value='submit' name='submit' class='submit'>
</form>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.