$_POST 不刷新答案

【问题标题】：$_POST without refreshing$_POST 不刷新
【发布时间】：2016-09-13 06:27:43
【问题描述】：

我有一个关联数组，用于生成图像。从这些图像中，我想选择两张或多张图片来随机获得一张。我的代码有效，但我有两个问题：

如何改进我的代码？以及如何使用 json 或其他我的网站在提交后不会刷新的东西？

<style>
        .check {
            opacity: 0.5;
            color: #996;
        }
    </style>
    <script>
        function getRandomInt( min, max )
        {
            return Math.floor( Math.random() * (max - min + 1) ) + min;
        }

        function debug()
        {
            console.log( $( "img.check" )[0] );
        }

        $( document ).ready( function()
        {
            $( "form" ).submit( function()
            {
                var images = $( "img.check" );
                if( images.length > 0 )
                {
                    $( "input[name=images]" ).attr( "value", $( images[getRandomInt( 0, images.length )] ).data( "id" ) );
                    return true;
                }
                else
                {
                    alert( 'Kein Bild ausgewählt.' );
                    return false;
                }
            } );
            $( 'form img' ).click( function()
            {
                $( this ).toggleClass( 'check' );
            } );
        } );
    </script>
</head>
<body>

<?php
$random = [
    'Key1' => 'https://static.pexels.com/photos/4952/sky-beach-vacation-summer.jpeg',
    'Key2' => 'https://static.pexels.com/photos/1852/dawn-landscape-mountains-nature.jpg',
    'Key3' => 'https://static.pexels.com/photos/33109/fall-autumn-red-season.jpg',
    'Key4' => 'https://static.pexels.com/photos/12567/photo-1444703686981-a3abbc4d4fe3.jpeg',
    'Key5' => 'https://static.pexels.com/photos/2757/books-magazines-building-school.jpg',
];
?>

<form method="post">
    <input type="hidden" name="images">
    <?php
    foreach ($random as $key => $val)
    {
        echo '<h1>$key</h1>';
        echo '<img src="'.$val.'" width="100px" height="100px" data-id="'.$key.'"">';
    }
    ?>
    <button type="submit" name="submit" class="btn btn-default">Submit</button>
</form>

<?php
if (isset($_POST['images']))
{
    echo '<img src="' . $random[$_POST['images']] . '" />';
}
?>

【问题讨论】：

使用AJAX向服务器发送数据而不刷新。
在 PHP 中使用 AJAX 概念。
您也可以在加载下一组图像之前对其进行缓存。
查看我的更新答案。它会帮助你！

标签： javascript php jquery arrays

【解决方案1】：

您可以使用将关联数组返回为 json 格式的 ajax。例子

为此使用 jquery

$.post('yourphpscript.php', 函数(数据) { data // 这是你的关联数组 }, 'JSON');

【讨论】：

【解决方案2】：

如果你只想刷新你的 div，使用这样的代码

 <html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Generate random number</title>
  </head>

  <body>
    <div id="div1" style="border:solid 1px red; width: 100px;"></div>
    <br /><br />
    <div id="div2" style="border:solid 1px green; width: 100px;">
    <button type="button" id="btn_click" /> click me!</button>
    </div>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script>
      $("#btn_click").click(function(){
        $('#div1').html(10 + Math.floor(Math.random()*91));
      });

      $("#btn_click").trigger("click");
    </script>
  </body>
</html>

【讨论】：

【解决方案3】：

使用AJAX 和POST 方法使用mimeType: "multipart/form-data" 发送数据和图像

AJAX 脚本代码：

<script>
$.ajax({
    type:"POST",
    url:"ajax_filename.php",
    data:data,
    mimeType: "multipart/form-data",
    contentType: false,
    cache: false,
    processData: false,
    success:function(result)
    {                   
        $('#image_div').attr('src','image_file_path.png'); // Change the image to submited image.
    }
});
</script>

【讨论】：

【解决方案4】：

ajax用于防止页面加载，所以你需要稍微改变你的表单提交功能，input hidden如果你使用ajax则不需要

 $( document ).ready( function()
        {
            $( "form" ).submit( function()
            {
                var images = $( "img.check" );
                if( images.length > 0 )
                {
                  images = $(images[getRandomInt( 0, images.length)]).data( "id" );
                  $.ajax({
                    type : "POST",  //set method
                    url : "",       //link to current page (can go other link if u want)
                    data: "images=" + images, // post data
                    success : function(r){
                        $('body').html(r);    // replace current page with new data
                    }
                })
                    return true;
                }
                else
                {
                    alert( 'Kein Bild ausgewählt.' );
                    return false;
                }
            } );
            $( 'form img' ).click( function()
            {
                $( this ).toggleClass( 'check' );
            } );
        });

如果您像上面那样使用，将不再需要隐藏的输入类型 ....

【讨论】：