Question

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

如何改进我的代码？我如何使用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']] . '" />';
}
?>

Answer 1

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

为此使用jquery

$ .post（＆＃39; yourphpscript.php＆＃39;，function（data）{ data //这是你的关联数组 }，＆＃39; JSON＆＃39;）;

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

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

Answer 4

ajax用于阻止网页加载，因此您需要稍微更改表单提交功能，input hidden如果您使用ajax则无需{/ 1}}

 $( 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' );
            } );
        });

如果您使用上面的输入类型隐藏将不再需要更长时间....

$ _POST没有刷新

4 个答案: