Question

所以我一直在努力解决这个问题，而且我不是专业的网页设计师。但基本上我有6张不同类型天气的图像，当他们被按下/点击时，根据哪个，我想要将什么类型的天气存储在桌子上。因此，如果单击云的图片，“云”一词将存储在我的MYSQL数据库中。在按下之后，用户最终将最终输入名称和关于天气的帖子，他们将能够在最终网页上查看。

所以我的问题是我不完全确定如何使图像存储该数据。我还希望观众能够查看不同天气故事的其他帖子，所以我知道我需要将信息放入和数组中。我想在javascipt中使用php来保存信息，但我不完全确定如何实现它，帮助？！

 <!DOCTYPE HTML>
   <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>WhethertheWeather.</title>

   <!--<link rel="stylesheet" type="text/css" href="demo/css/screen.css" media="all" />-->
        <script src="http://www.adrianpelletier.com/mint/?js"    type="text/javascript"></script>
        <script type="text/javascript" src="demo/scripts/jquery-1.3.2.min.js">   </script>
        <script type="text/javascript" src="demo/scripts/jquery-ui-1.7.1.custom.min.js"></script>
        <script type="text/javascript" src="demo/scripts/execute.js"></script>


<script>
function cloudy()

{
    return "<?php


$dbc=mysql_connect('asite.com','$user','$password','$db') ;

mysql_select_db('$db',$dbc);


    echo $_POST[weather];?>" 


}


</script>

<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body background="images/gradientsky.jpg"> 

<div id="logo">

WhethertheWeather.

</div>

<div id="question">

Whats your favorite weather?

</div>

<div id="weather">

<ul id="nav-reflection">
<form name="myform" method="post" action="cloudy_name.php">
    <li class="button-color-1"><a href="cloudy_name.php" id="weather[]" onclick="cloudy();" title="My fancy link"><img src="images/cloudybubble.png" width="211" height="180" align="left"></a></li>
    <li class="button-color-1"><a href="sunny_name.php" id="weather[]" onclick="sunny();" title="My fancy link"><img src="images/sunnybubble.png" width="211" height="180" align="left"></a></li>
    <li class="button-color-2"><a href="snowy_name.php"  id="weather[]" onclick="snowy();" title="My fancy link"><img src="images/snowbubble.png" width="211" height="180" align="left"></a></li>
    <li class="button-color-1"><a href="rainy_name.php" id="weather[]" onclick="rainy();" title="My fancy link"><img src="images/rainbubble.png" width="211" height="180" align="left"></a></li>
    <li class="button-color-1"><a href="mixy_name.php" id="weather[]" onclick="mixy();" title="My fancy link"><img src="images/mixbubble.png" width="211" height="180" align="left"></a></li>
    <li class="button-color-1"><a href="windy_name.php" id="weather[]" onclick="windy();" title="My fancy link"><img src="images/windybubble.png" width="211" height="180" align="left"></a></li>

<input type="hidden" name="weather" value="weather" id="weather">
</form>
</ul>
</div>

</body>
</html>

以下是我正在使用的代码。

这是索引页面，我将名称更改为天气，因此不会与我拥有的其他名称变量混淆。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WhethertheWeather.</title>

<!--<link rel="stylesheet" type="text/css" href="demo/css/screen.css" media="all" />-->
        <script src="http://www.adrianpelletier.com/mint/?js" type="text/javascript"></script>
        <script type="text/javascript" src="demo/scripts/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="demo/scripts/jquery-ui-1.7.1.custom.min.js"></script>
        <script type="text/javascript" src="demo/scripts/execute.js"></script>


<script>
    function showweather(weather) {
    window.location = 'cloudy_name.php?w=' + weather;
}

</script>

<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body background="images/gradientsky.jpg"> 

<div id="logo">

WhethertheWeather.

</div>

<div id="question">

Whats your favorite weather?

</div>

<div id="weather">

<ul id="nav-reflection">
<form method="post" action="cloudy_name.php">
        <li class="button-color-1"><a href="cloudy_name.php" id="weather[]" onclick="showweather('cloudy');" title="My fancy link"><img src="images/cloudybubble.png" width="211" height="180" align="left"></a></li>
    <li class="button-color-1"><a href="sunny_name.php" title="My fancy link"><img src="images/sunnybubble.png" width="211" height="180" align="left"></a></li>
    <li class="button-color-2"><a href="snowy_name.php" title="My fancy link"><img src="images/snowbubble.png" width="211" height="180" align="left"></a></li>
    <li class="button-color-1"><a href="snowy_name.php" title="My fancy link"><img src="images/rainbubble.png" width="211" height="180" align="left"></a></li>
    <li class="button-color-1"><a href="mixy_name.php" title="My fancy link"><img src="images/mixbubble.png" width="211" height="180" align="left"></a></li>
    <li class="button-color-1"><a href="windy_name.php" title="My fancy link"><img src="images/windybubble.png" width="211" height="180" align="left"></a></li>

<input type="hidden" name="weather" value="none" id="myweather">
</form>
</ul>
</div>

</body>
</html>

以下是您输入名称的cloudy_name.php页面。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>WhethertheWeather</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body background="images/cloudysky.jpg"> 

<div id="name">
First of all, what is your name?
</div>

    <form method="post" action="cloudy_story.php?w=<?php echo htmlspecialchars($_GET['weather'])?>">
            <table width="20%" border="1" align="center" cellpadding="1" cellspacing="1">

                <td width="100%"><label>Name: <input type="text"  name="name" value="<?php echo $_POST[name]; ?>"></input></label>

                    <input type="submit" value="Submit"> 


            </table>
        </form>


</body>
</html>

这是cloudy_story.php。

<html>
    <head>
        <title>Forum</title>
    <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body background="images/cloudysky.jpg"> 

   <div id="cloudy">
    Cloudy
    </div>
    <div id="white">
      <div id="blue">
        <div id="grey">
          <div id="container">
            <form method="post" action="cloudy_update.php?w=<?php echo htmlspecialchars($_GET['weather']); echo htmlspecialchars($_POST['name'])?>">
              <table width="800px" border="1" align="center" cellpadding="3" cellspacing="1">
                <tr>
                  <td width="800px"><h5><?php echo 'Hi, '. $_POST[name] ?>!
                  Write your story about your favorite weather. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam urna, rutrum ut hendrerit sit amet, dictum ut dui. Cras id sem at tortor ornare porttitor at id dolor. Proin quis nulla sit amet felis tempus imperdiet eu id felis. Vivamus ac ultricies ipsum. Aliquam nec enim nec turpis mattis aliquam. Aliquam eu quam libero. Quisque vel ligula ante, ut tempor sapien. Nullam molestie elementum urna et consequat. Fusce turpis dolor, consectetur vel placerat vel, tempor vel justo. Donec odio orci, imperdiet quis varius dignissim, pulvinar id erat. Proin lectus enim, ornare tincidunt facilisis et, accumsan eget purus. Phasellus dolor mi, . </h5></td>
                </tr>
                <tr>
                  <td width="300px"><label>Story :
                    <textarea rows="10" cols="100"  name="story" ><?php echo $_POST[story]; ?></textarea>
                    </label></td>
                </tr>
                <tr>
                  <td width="300px"><input type="submit" value="Post"></td>
                </tr>
              </table>
              <input type="hidden" name="name" value="<?php echo $_POST[name]?>">
            </form>
          </div>
        </div>
      </div>
    </div>

    </body>
</html>

这是更新所有内容的页面（cloudy_update.php）并将其放在m数据库的表中。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>

<body>
<?php

$dbc=mysql_connect('localsite','user','pw','db') ;
mysql_select_db('db',$dbc);

    /////////////////////////////////////////////////
    //let's insert our data into the database      //
    /////////////////////////////////////////////////


$query = "insert into stories values('" . mysql_real_escape_string($_GET['weather']) . "', '" . mysql_real_escape_string($_POST['name']) . "' , '" . mysql_real_escape_string($_POST['story']) . "')"

    or die ("Error - Couldn't register user.");

    echo "Thank you $_POST[name]! You've been successfully posted<br /><br />
        Please view all the posts <a href='view_forum.php'><b>here</b></a>.";


    /////////////////////////////////////////////////
    // finished inserting our data into the database //
    /////////////////////////////////////////////////


     exit();
 ?>

对不起......我真的很挣扎这个...可能是一件小事我觉得太傻了......

Answer 1

首先，很酷的背景。非常好。标题字体需要更改，但我确定您知道这一点。正如它在此处设置的那样，每个按钮都会将您发送到为该天气类型（sunny_name.php）构建的唯一页面。因此，您不需要存储第一页中的任何变量。但是，在第二页上，您可以通过sunny_name.php上的表单传递天气变量+名称变量。

<form action="sunny_story.php?weather=sunny" method="post">

最后你有第三页（sunny_story.php）输入你的信息（除非你有一个故事要添加到这里，在这种情况下你会将名称var存储在url中，以及像final_page.php这样的天气？天气晴朗的=＆放大器;名称=约翰）。无论你选择做什么，结局都是类似的：

<?php
//connect to db
$con=mysql_connect('localhost','username','pw');

if(!$con){
die('Could not connect to the db: ' .mysql_error());
}

mysql_select_db('yourdb',$con);

//enter query
$query = "INSERT INTO `table` VALUES ('".mysql_real_escape_string($_GET['weather'])."',
         '".mysql_real_escape_string($_GET['name'])."',
         '".mysql_real_escape_string($_POST['story'])."')"

$result = mysql_query($query);

注意：查询中的值顺序取决于mysql表中列的顺序。此外，故事的Post方法取决于您用于访问此最后一页的表单方法。 Haven没有经过测试，但应该可以使用。

Answer 2

你可以做的一件事就是代替：

<li class="button-color-1"><a href="cloudy_name.php" id="weather[]" onclick="cloudy();" title="My fancy link"><img src="images/cloudybubble.png" width="211" height="180" align="left"></a></li>

您可以编写一个名为showName()的javascript函数，该函数会将用户发送到相应的页面，如：

<li class="button-color-1"><a href="cloudy_name.php" id="weather[]" onclick="showName('cloudy');" title="My fancy link"><img src="images/cloudybubble.png" width="211" height="180" align="left"></a></li>

在showName()函数中，您只需编写：

function showName(Name) {
    window.location = 'name.php?w=' + Name;
}

现在，在name.php中，您可以输出带有action属性的表单：

<form method="post" action="next.php?w=<?php echo htmlspecialchars($_GET['w'])?>">

</form>

在next.php中，您可以通过$_GET['w']访问天气并通过$_POST['name']命名，并使用简单的插入查询将其添加到数据库中：

$query = "insert into tablename values('" . mysql_real_escape_string($_GET['w']) . "', '" . mysql_real_escape_string($_POST['name']) . "')";

Answer 3

尝试这样做。我没有添加任何样式。

    <!DOCTYPE HTML>
   <html>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <title>WhethertheWeather.</title>

   <!--<link rel="stylesheet" type="text/css" href="demo/css/screen.css" media="all" />-->
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">   </script>


<script>
    $(document).ready(function(){
        $('#nav-reflection li a img').click(function(){
            var value = $(this).parent().attr('id');
            $('#weatherVal').val(value);
            $('#detailsDiv').slideDown();
        })
        $('#save').click(function(){
           $.post('insert.php',$("#weatherForm").serialize(), 
                function(data){
                    console.log(data);
                }
            ) 
        });
    });
</script>

<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body background="images/gradientsky.jpg"> 

<div id="logo">

WhethertheWeather.

</div>

<div id="question">

Whats your favorite weather?

</div>

<div id="weather">
<form method="post" id="weatherForm">

    <ul id="nav-reflection">
        <li class="button-color-1"><a href="javascript:void(0);" id="cloudy" title="My fancy link"><img src="images/cloudybubble.png" width="211" height="180" align="left"></a></li>
        <li class="button-color-1"><a href="javascript:void(0);" id="sunny" title="My fancy link"><img src="images/sunnybubble.png" width="211" height="180" align="left"></a></li>
        <li class="button-color-2"><a href="javascript:void(0);" id="snowy"  title="My fancy link"><img src="images/snowbubble.png" width="211" height="180" align="left"></a></li>
        <li class="button-color-1"><a href="javascript:void(0);" id="rainy" title="My fancy link"><img src="images/rainbubble.png" width="211" height="180" align="left"></a></li>
        <li class="button-color-1"><a href="javascript:void(0);" id="mixy" title="My fancy link"><img src="images/mixbubble.png" width="211" height="180" align="left"></a></li>
        <li class="button-color-1"><a href="javascript:void(0);" id="windy" title="My fancy link"><img src="images/windybubble.png" width="211" height="180" align="left"></a></li>
    </ul>
    <input type="hidden" name="weatherVal" id="weatherVal">
    <div id="detailsDiv" style="display: none;">
        <input type="text" name="name" id="name">
        <textarea type="text" name="story" id="story"></textarea>
        <input type="button" name="save" id="save" value="Save">
    </div>
</form>
</div>

</body>
</html>

使用jquery你可以将值发布到另一个文件并在那里进行数据库操作。

<?php
    $dbc=mysql_connect('localhost','root','','test') ;
    if(!$dbc){
        die('Could not connect to the db: ' .mysql_error());
    }
    else
    {
        $query = "INSERT INTO `weather` VALUES ('','".mysql_real_escape_string($_POST['weatherVal'])."',
         '".mysql_real_escape_string($_POST['name'])."',
         '".mysql_real_escape_string($_POST['story'])."')";
        echo $query;
        $result = mysql_query($query);
        return $result;

    }
?>

将图像作为数组放置，以便在单击时存储数据

3 个答案: