Question

我正在使用worldweatheronline api来访问天气数据，当请求发送时它通过在json中发送数据来响应。我想在html页面中显示天气信息

<!DOCTYPE html>
<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<input type="text" id="in"></input>
<input type="hidden" id="keys" value="apikey"></input>
<button id="go">Search</button>
<script>
$(document).ready(function(){
$("#go").click(function(){
	var apikey = $("#keys").val();
	var q = $("#in").val();
jQuery.ajax({
    url: 'http://api.openweathermap.org/data/2.5/weather?key=' + apikey + '&q=' + q,
    success: function(response){
        var obj = JSON.parse(response);
        console.log(obj);
    },
    });
 });
});
</script>
</body>
</html>

<html>
<head>
    <title>weather app</title>
</head>
<body>
    <form method="GET" action="http://api.openweathermap.org/data/2.5/weather">
        <input type="hidden"  name="key" value="apikeyneeded"></input>
        <input type="text" name="q"></input>

        </form>
        </body>
</html>

Answer 1

您无法使用JSON.parse那种方式。首先，您必须向该API发出请求，然后获得响应，最后使用解析JSON.parse(response) 如果你有兴趣，我可以帮你用jQuery来管理这个请求json。

Answer 2

检查一下。

var apikey = jQuery('[name="key"]').val();
var q= jQuery('[name="q"]').val();
jQuery.ajax({
    url: 'http://api.openweathermap.org/data/2.5/weather?key=' + apikey + '&q=' + q,
    success: function(response){
        var obj = JSON.parse(response);
        console.log(obj);
    },
});

将此行添加到head代码中以包含jQuery <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Answer 3

使用ajax方法从openweathermap api获取数据。

   public ImageView createReflectedImages(RoundedImageView image) {

    RoundedDrawable drawable = (RoundedDrawable) image.getDrawable();
    Bitmap originalImage = drawable.toBitmap();

    int width = originalImage.getWidth();
    int height = originalImage.getHeight();

    Matrix matrix = new Matrix();
    matrix.preScale(1, -1);

    Bitmap reflectionImage = Bitmap.createBitmap(originalImage, 0,
            height / 2, width, height / 2, matrix, false);

    Bitmap bitmapWithReflection = Bitmap.createBitmap(width,
            (height + height / 2), Config.ARGB_8888);

    Canvas canvas = new Canvas(bitmapWithReflection);

    canvas.drawBitmap(originalImage, 0, 0, null);

    canvas.drawBitmap(reflectionImage, 0, height, null);

    Paint paint = new Paint();
    LinearGradient shader = new LinearGradient(0, height, 0, bitmapWithReflection.getHeight()
            , 0x70ffffff, 0x00ffffff, TileMode.CLAMP);

    paint.setShader(shader);

    paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));

    canvas.drawRect(0, height, width, bitmapWithReflection.getHeight()
            , paint);

    RoundedImageView imageView = new RoundedImageView(mContext);
    imageView.setImageBitmap(bitmapWithReflection);
    imageView.setLayoutParams(new ImageGallery3D.LayoutParams(GeneralHelper.dp(180), GeneralHelper.dp(240)));//width and height of Image
    return imageView;
}

如何在javascript

3 个答案: