How can we construct custom URLs in HTML form with GET method? - html

I am using Django for making a website. I am using an HTML form with GET as the method.
The problem is that by default the get url is like this:
/search?name=user&place=place
But I want it to be something like:
my_site/search/user/place
How can that be done?

Why not use POST as method and retrieve the parameters in your view from request.POST? In this way they won't appear in your url.
Also, if you're expecting a list of results i recommend using ListView from views.generic, and in the dispatch() method you'll retrieve your parameters based on which you'll filter the user model (i guess).

It is better with a get request immo, but if you want something like: my_site/search/user/place it is easy, you just have to define the variables in your url and get the arguments in your function.
You can find more detail in django documentation

The only way you can do this in the browser is with Javascript. You will need to build the URL from the form contents. There are many mistakes you can make around encoding the values for the URL. You should be asking why you want to do it this way instead of using the QUERY_PARAMS as the form is doing.
Decoding it with Django isn't that hard, they are just variables in the URL pattern, but unless you have some kind of earth shattering new technology, you should let the browser send them to you without using JS to handcraft the URL.

Using the GET method send data via the web page. This means that the URL can be copied and rechecked at any time.

Related

Initialize an Angular page with large json from client?

I am used to creating webapplications with Wicket. There it is possible to generate a HTML page using POST, receiving a large JSON from the client (browser) to generate some charts. This can be done for example with CURL.
In Angular, I could not find a similar approach.
What is the recommended way to render a chart based on the JSON that a browser provides? An URL parameter is not really the way to go as the URL length is limited.
I can think of a work-around wheren I first post the data to some webservice, receive an id, and then pass that id to an URL in Angular, but that seems a lot of work for something simple :)

how can I override the data that is rendered on shopify .liquid with the need for using Ajax

I have a use case where I want to implement custom search functionality for a Shopify site. So instead of using getting a JSON with Ajax and making a html and replacing the html. Is there a way where I can override the search.results data that the .liquid files are using.
So when I make a search in /search?q=xyz, I want to get the data from my API, and use that data to render the product-item.liquid. This way I don't have to worry about the UI of the product-item for different themes.
Yes. You can easily do this. You would install an App in your shop, and create an endpoint you would call with your search criteria. The end point is handled by a Shopify App Proxy, that securely allows you to callback the App. You could return Liquid as results, or just JSON as you wish. It is a standard and simple pattern for you to use.
See here: https://help.shopify.com/api/tutorials/application-proxies

Form POST vs. AJAX POST

As far as I can see. The form post accepts a document while the ajax post accepts a xhr (I'm guessing this can be set)?
If that is the case, I can't use both in the same situation?
Whare are the differences between these two methods of using POST
You could use both and achieve the same result in terms of functionality, but I encourage you to rely on AJAX (jQuery) for providing a better overall user experience and lessen the load on the server (using php, you can only do what is needed, without the need to provide the full html output once more). Only update what actually changed.
When I was using jQuery and AJAX a few years back, I relied on AJAX to update parts of the UI without having the need to refresh the whole web page. Moreover, I used this to CRUD items in the management area and actually achieved a pretty nice user experience.
You can find more information about the jquery post method at jQuery GET and POST details and usage examples
It only makes sense to use one or the other in a context designed for that type of request. If the server would return a full, displayable resource (most commonly, a HTML document), use a form post so that the browser "redirects" to the result. If the server would return a result that only makes sense as part of an already visible resource, use xhr, parse the result and incorporate it into your page.

How would you pass HTTP Headers using a standard anchor tag?

According to the HTML4 reference there's no attribute to pass on HTTP headers using the anchor tag.
I would like to offer a link requesting for a specific file type using the Accept header.
The only way I can see is simply let it be, and pass a GET parameter.
You may as why I would want to do this... I intend to expose a bunch of methods as a public API, serving the results as JSON. And when doing requests using JavaScript, or another programming language, using the Accept header to request a specific response format is "The Right Way" to do it. But that would mean that I need to accommodate both the Accept header and the GET parameter in my code, which smells like a duplication of logic.
This topic is largely debatable, as such links may not be possible to bookmark in the browser... still... I'd like to know if it was possible without too much magic...
I don't see another way than using the GET parameter or an extension like
http://myurl/page?format=json
or better
http://myurl/page.json
Which overrides the accept header (since the browser will only send it's default
accept header). Then you just need to initialize a format to accept header mapping like this (which I don't find duplicate logic at all):
{
"json" : "application/json",
"html" : "text/html"
}
You can't.
I intend to expose a bunch of methods as a public API, serving the results as JSON. And when doing requests using JavaScript, or another programming language, using the Accept header to request a specific response format is "The Right Way" to do it. But that would mean that I need to accommodate both the Accept header and the GET parameter in my code, which smells like a duplication of logic.
If I understand you correctly, you don't have to do this anyway. Browsers already supply an Accept header.
Hmm, seems like if your results are JSON, you will be sending / receiving from script anyway, which can provide any header you want. Just have your link call a script function and you're done.

html pass a link with get parameters within a link

I am trying to pass a link within another in such a way :
http://www.1st_site.com/?u=http://www.2nd_site.com/?parameter1=xyz
I think what the problem is , parameter1=xyz is passed as a parameter for 1st_site
is there anyway to avoid that?
You need to URL-encode the entire URL which is represented as query parameter value, else it will be interpreted as part of the request URL, thus this part: http://www.2nd_site.com/?parameter1=xyz.
It's unclear what programming language you're using, but most of decent webbased languages provides functions/methods/classes to achieve this, e.g. URLEncoder in Java, or c:url and c:param in JSP/JSTL, urlencode() in PHP and escape() in JavaScript.
Here's at least an online URL encoder: http://meyerweb.com/eric/tools/dencoder/. If you input http://www.2nd_site.com/?parameter1=xyz, you should get http%3A%2F%2Fwww.2nd_site.com%2F%3Fparameter1%3Dxyz back so the request URL should effectively end up in:
http://www.1st_site.com/?u=http%3A%2F%2Fwww.2nd_site.com%2F%3Fparameter1%3Dxyz