个人中心
gpt4 book ai didi

javascript - 使用 Inert html 创建文件的更好方法

转载 作者：行者123 更新时间：2023-12-03 03:59:41 25 4
gpt4 key购买 nike

在这个项目中，我在用户提交论坛时创建一个新文件。该文件在 #main div 中包含 html 结构。请看我的代码

<?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>

我为此目的使用php和Jquery。

但是这里的问题是有时 #main div 包含太多内部 html 。

那么当作为 $_POST 传递时会出现问题吗？

$_POST 如果超过一定数量，会限制该值吗？

有什么替代或好的方法来解决这个问题吗？

最佳答案

您可以考虑一种方法，而不是实际尝试 POST 大量数据，只需将相关文档/页面的 url POST 到 PHP 脚本，然后该脚本可以使用 dom 操作来查找您所需的内容。这应该会使请求变得非常快，并且不会在发布的数据方面遇到任何限制。

ajax 函数可以很容易地被 jQuery 版本替换 - 我不使用 jQuery。

表单中的按钮不再提交传统意义上的表单，而是触发一个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>

关于javascript - 使用 Inert html 创建文件的更好方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44781725/

25 4 0
文章推荐： javascript - Html.BeginAjaxForm 从操作返回数据并将其注入(inject)到用户的 DOM 中
文章推荐： javascript - Angular 4 Web 动画在 Safari 中重置
文章推荐： javascript - 日期时间选择器布局错误
文章推荐： javascript - Draftjs 尝试删除原子 block
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com