0

所以我一直在为此苦苦挣扎，而且我不是专业的网页设计师。但基本上我有 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();
 ?>

抱歉......我真的很挣扎......可能是一些我太愚蠢以至于看不到的小东西......

4

3 回答 3

0

首先，很酷的背景。非常好。标题字体需要更改，但我相信您已经意识到这一点。由于它是在这里设置的，看起来每个按钮都会将您发送到为该天气类型构建的唯一页面（sunny_name.php）。所以你不需要从第一页存储任何变量。然而，在您的第二页上，您可以通过您在sunny_name.php 上的表单传递天气变量+ 名称变量。

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

最后你有你的第三页（sunny_story.php），它输入你的信息（除非你有一个故事要在这里添加，在这种情况下，你将把名字 var 和天气一起存储在 URL 中，比如 final_page.php?weather=sunny&name =约翰）。无论你选择做什么，结局都是相似的：

<?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 方法取决于您用于到达最后一页的表单方法。尚未测试，但应该可以工作。

于 2012-04-14T21:49:16.470 回答
0

One thing you can do is instead of this :

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

You can write a single javascript function called showName() which will send the user to the appropriate page like :

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

In showName() function you can simply write :

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

Now in name.php you can output the form with action attribute as :

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

</form>

In the next.php you can access the weather via $_GET['w'] and name via $_POST['name'] and add them into the database by using a simple insert query like :

$query = "insert into tablename values('" . mysql_real_escape_string($_GET['w']) . "', '" . mysql_real_escape_string($_POST['name']) . "')";
于 2012-04-15T07:59:25.370 回答
0

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

    <!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;

    }
?>
于 2012-04-15T08:36:01.973 回答